Reputation: 495
I am using Ajax Form to render partial view in the page.
see below code
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery-1.7.1.min.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>"></script>
<form id="aspnetForm" runat="server" style="height: 100%;">
<% using (Ajax.BeginForm("demo", "demo", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divToUpdate" }, new { @ID = "AjaxForm" }))
{ %>
<%= Html.DropDownList("Demo", list, new { @id = "id", @class = "dropdown" })%>
<% }%>
<input type="submit" value="Save" />
<div id="divToUpdate">
<% Html.RenderPartial("UserControls/DemoPage"); %>
</div>
<% }%></form>
In this i include 4 js. I have a page with Form tag and inside that i have a prtial view page. when i am select dropdownlist and click on save button i want ajax post but i found that whole page is reload .
Any Idea about this?
Thanks
Upvotes: 2
Views: 4782
Reputation: 7249
Problem is,
Try as below,
<% using (Ajax.BeginForm("demo", "demo", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divToUpdate" }, new { @ID = "AjaxForm" }))
{ %>
<%= Html.DropDownList("Demo", list, new { @id = "id", @class = "dropdown" })%>
<input type="submit" value="Save" />
<% }%>
<div id="divToUpdate">
<% Html.RenderPartial("UserControls/DemoPage"); %>
</div>
You could also change drop down to auto postback, then you would not need separate submit button,
<%= Html.DropDownList("Demo", list, new { @id = "id", @class = "dropdown", @onchange = "$(this).closest('form').submit();" })%>
Upvotes: 5