CODEWITHSUNDEEP
c#asp.net-mvcasp.net-ajaxasp.net-mvc-5
user3615792
user3615792

Reputation: 31

Ajax.BeginForm partial view replace whole page

I had some problem in my MVC application, when I use button (submit) everything is okay but if I use onchange, partial view opened in the same window not replaced any div, I use all methods what I see here, but nothing help, here all code (any does not work correctly). Why its Happens?

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        List<string> Year = new List<string>();
        Year.Add("1");
        Year.Add("2");
        Year.Add("3");
        Year.Add("4");
        ViewBag.Years = new SelectList(Year);
        return View();
    }
 public PartialViewResult testt()
    {
        return PartialView();
    }
    [HttpPost]
public PartialViewResult testTwo()
        {
            return PartialView();
        }
}

View (I am include on my page all scripts unobtrusive ajax, microsoft ajax, jquery and many others):

<script src="~/Scripts/respond.min.js"></script>
<script src="~/Scripts/_references.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/MicrosoftAjax.debug.js"></script>
<script src="~/Scripts/MicrosoftAjax.js"></script>
<script src="~/Scripts/MicrosoftMvcAjax.js"></script>
<script src="~/Scripts/MicrosoftMvcValidation.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/respond.js"></script>
@using (Ajax.BeginForm("testt", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "testDiv", InsertionMode = InsertionMode.Replace }))

{
<div>
    <div >
       @Html.DropDownList("UnitsNames", (SelectList)ViewBag.Years, new { onchange = "$(this.form).onsubmit()" })
    </div>
    <div >
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "$(this.form).submit()" })
    </div>
    <div>
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "this.form.submit()" })
    </div>
    <div>
               @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "this.form.onsubmit()" })
    </div>
</div>
}

@using (Ajax.BeginForm("testTwo", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "testDiv", InsertionMode = InsertionMode.Replace }))

{
<div>
    <div>
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "$(this.form).onsubmit()" })
    </div>
    <div>
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "$(this.form).submit()" })
    </div>
    <div>
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "this.form.submit()" })
    </div>
    <div>
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "this.form.onsubmit()" })
    </div>
</div>
}

<br>
<div id="testDiv">
    <h4>here i need a partial view</h4>
</div>

Thanks!

Upvotes: 3

Views: 3817

Answers (4)

Sumit
Sumit

Reputation: 41

I had same problem. I noticed script does not work if it's included in different pages.

Add Script in your _layout page

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

and Remove from place where you do not need it.

Upvotes: 0

SmolkoMatic
SmolkoMatic

Reputation: 106

I had the same issue. I am using Visual Studio 2015, so I just simply updated all NuGet packages and the code started to work as intended.

Hope this helps.

Upvotes: 0

Strawberry
Strawberry

Reputation: 119

You have to include 

@section scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

this in your page, else it won't work. Try like this, and not with the script tag.

Upvotes: 1

malkam
malkam

Reputation: 2355

In your second Ajax form,method is POST,but you've not defined any Action method with HttpPost Attribute

 @using (Ajax.BeginForm("testt", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "testDiv", InsertionMode = InsertionMode.Replace }))

Add HttpPost like below

[HttpPost]
public PartialViewResult testt()
    {
        return PartialView();
    }

Upvotes: 0

Related Questions