MVC 3 using partial view to add a new listing with ajax

REVISED BUT SAME ISSUE:

I am building a site with MVC 3 and have run into a big road block. On the profile page, users will have the ability to create a new listing offered by their center. I have created this using a partial view for the "_CenterProfile" portion of the page which works perfectly. I've implemented the Create Listing as the main focus of the page and model which also works perfectly. I would like to use Ajax to create the database entries as well as populate or update the Listings shown on the Profile page. This is where the problem comes in.

When I click the submit button, rather than updating the targeted element, the page flips to a non existent "CreateListing" page ../Exchange/CreateListing. I'm going crazy trying to get this to function and no matter what I try it does the same thing. The Listing is populated to the database and the page changes from /Exchange/Profile to /Exchange/CreateListing.

I'm sure someone out there can help me, I'm on a deadline and getting past this headache will save me big time.

"Profile" View:

      @model Exchange.Models.CreateListingModel

@{
    ViewBag.Title = "Profile";
}

<h2>Profile</h2>

@Html.Action("_CenterProfile")

<br />
@using (Ajax.BeginForm("CreateListing", "Exchange", new AjaxOptions
{
    HttpMethod = "Get",
    UpdateTargetId = "centerListings",
    InsertionMode = InsertionMode.Replace
}))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>CreateListingModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.productName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.productName)
            @Html.ValidationMessageFor(model => model.productName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.forSale)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.forSale)
            @Html.ValidationMessageFor(model => model.forSale)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.forTrade)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.forTrade)
            @Html.ValidationMessageFor(model => model.forTrade)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.price)
            @Html.ValidationMessageFor(model => model.price)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.unit)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.unit)
            @Html.ValidationMessageFor(model => model.unit)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.catagoryID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.catagoryID)
            @Html.ValidationMessageFor(model => model.catagoryID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.description)
            @Html.ValidationMessageFor(model => model.description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.imageURL)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.imageURL)
            @Html.ValidationMessageFor(model => model.imageURL)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.activeListing)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.activeListing)
            @Html.ValidationMessageFor(model => model.activeListing)
        </div>
    </fieldset>

    <p>
        <input type="submit" value="CreateListing" />
    </p>
}

    <table id="centerListings">

    </table>


<p>
    @Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) |
    @Html.ActionLink("Back to List", "Index")
</p>

CreateListing Controller:

public PartialViewResult CreateListing(CreateListingModel model)
{
    mmjc.CreateListing(model.catagoryID, model.productName, model.forSale, model.forTrade, model.price, model.unit, model.description, model.imageURL, model.activeListing);
    var listings = mmjc.GetCenterListings();
    return PartialView("_CenterListings", listings);
}

_CenterListings PartialView:

@model IEnumerable<Exchange.Models.Listing>

<table id="centerListings">
    <tr>
        <th>
            CatagoryID
        </th>
       开发者_JAVA技巧 <th>
            ProductName
        </th>
        <th>
            ToSell
        </th>
        <th>
            ToTrade
        </th>
        <th>
            PricePerUnit
        </th>
        <th>
            Unit
        </th>
        <th>
            Description
        </th>
        <th>
            ImgPath
        </th>
        <th>
            ProfileID
        </th>
        <th>
            ActiveListing
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CatagoryID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProductName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ToSell)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ToTrade)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PricePerUnit)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Unit)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ImgPath)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ProfileID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ActiveListing)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ListingsID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ListingsID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ListingsID })
        </td>
    </tr>
}

</table>

---

I think you should provide an UpdateTargetId in your AjaxOptions:

new AjaxOptions { HttpMethod = "Post",
                  UpdateTargetId = "idOfSomeHtmlContainer" }

With this property you specify which part of the page should be updated with the response from the AJAX call. Using the code you have now, ASP.NET MVC doesn't know which part of the page to update with the view returned from your action method.

---

Ok everyone. So I fixed my own problem here. It seems many people are having this same issue. The fix is so easy it made me feel very silly.

All you have to do is include

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

In your _Layout or Main View. Without it the Ajax.BeginForm is useless and will continue to redirect to the PartialViewResult.

---

I think you want to specify the necessary Ajax options to replace the content of the create listing form- namely the Id of the element to replace and the update mode.