Ajax.BeginForm在MVC中呈现错误的URL

Question

I am trying to load a div data using ajax rather than whole view on post method. but it returns object%20HTMLInputElement action name on post action.

Controller:

 [HttpGet]
 public ActionResult Index()
 {
   return View();
 }

 [HttpPost]
 public ActionResult Index(DemoCLass objdemo)
 {
   return View();
 }

View

<div id="divEmp">
@using (Ajax.BeginForm("Index", "Challan", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp" }))
{
    @Html.AntiForgeryToken()
    <h3 style="text-align:center;" class="row header">Challan Data</h3>

    @Html.Partial("_DateCommonFT")
            }

It includes _Layout.cshtml where i have defined scripts as:

<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

How to render only post action without loading whole page (_layout.cshtml) on post request using ajax.

Answer 1

Can you try to close your div tag and receive HtmlForgeryToken in controller like following.

you can also fill your target div with PartialView by returning PartialView() in Index method

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(DemoCLass objdemo)
{
   return PartialView();
}


<div id="divEmp">
</div>
@using (Ajax.BeginForm("Index", "Challan", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp" }))
{
    @Html.AntiForgeryToken()
    <h3 style="text-align:center;" class="row header">Challan Data</h3>

    @Html.Partial("_DateCommonFT")
}

Answer 2

please Ajax.Begin form you can use OnSuccess method.

In VIew:-

 @using (Ajax.BeginForm("Index", "Challan", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp",  OnSuccess = "AjaxForm" }))
    {
    }

In Script:- here return json from post controller.

function AjaxForm(response){
.....do as uou want...
}

in Controller:-

[HttpPost]
 public ActionResult Index(DemoCLass objdemo)
 {
   return json(new {IsSuccess = true},JsonRequestBehavior.AllowGet);
 }

if you have any query in this one then tell to me

Answer 3

Use the PartialView method to return a view without the layout.

[HttpPost]
public ActionResult Index(DemoCLass objdemo)
{
   return PartialView();
}

If you want to return the html without layout markup only for the ajax form submissions, you can check the request headers to see whether the request is an xhr request or not. Request.IsAjaxRequest() method will be handy here.

[HttpPost]
public ActionResult Index(DemoCLass objdemo)
{
   if (Request.IsAjaxRequest())
   {
      return PartialView();
   }
   else
   {
      return View();
   }
}