Geek Answers Handbook

Mvc 3 partial view with Ajax.BeginForm not working (sending to new arrgh form)

I have a mvc 3 form with two columns. The left column is a tree structure, and when you select a node div with id = 'partialView' is updated to show the details of this node. It seems to be working fine. The edit form (which is a partial view) is loaded into a div with id = 'partialView'.

Now the problem occurs when the user submits this partial view ... now he is returning the message back to the controller and the correct method. HOWEVER, the result is not returned in the div with id = 'partialView', but the message is sent to a new page.

So this is the scenario in which I want the partial view to be sent and returned back, replacing the existing partial view.

Is it possible?

I have included my code below for my partial view ...

@model DataModel.Code @using (Ajax.BeginForm("Edit", "Code", new AjaxOptions { UpdateTargetId = "partialView", HttpMethod="POST" } )) { @Html.ValidationSummary(true) <fieldset> <legend>Code</legend> @Html.HiddenFor(model => model.CodeID) <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-field"> @Html.EditorFor(model => model.Note) @Html.ValidationMessageFor(model => model.Note) </div> <div class="editor-label"> @Html.LabelFor(model => model.DateModified) </div> <div class="editor-field"> @Html.EditorFor(model => model.DateModified) @Html.ValidationMessageFor(model => model.DateModified) </div> <div class="editor-label"> @Html.LabelFor(model => model.TopicID) </div> <div class="editor-field"> @Html.EditorFor(model => model.TopicID) @Html.ValidationMessageFor(model => model.TopicID) </div> <div class="editor-label"> @Html.LabelFor(model => model.Special) </div> <div class="editor-field"> @Html.EditorFor(model => model.Special) @Html.ValidationMessageFor(model => model.Special) </div> <div class="editor-label"> @Html.LabelFor(model => model.Html) </div> <div class="editor-field"> @Html.EditorFor(model => model.Html) @Html.ValidationMessageFor(model => model.Html) </div> <p> <input type="submit" value="Save" /> </p> </fieldset> } <div> @Html.ActionLink("Back to List", "Index") </div> @Html.Telerik().ScriptRegistrar().jQuery(true) <script type="text/javascript"> $(document).ready(function () { }); </script>
+4
source share
1 answer

Enable

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

in your _Layout.cshtml

+20
source

More articles:


All Articles