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>
<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>
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
In your _Layout or Main View. Without it the Ajax.BeginForm is useless and will continue to redirect to the PartialViewResult.