samedi 30 janvier 2021

Ajax.BeginForm does not update the page but it get a new one

I am working on Ajax Demo with MVC in my example there is a submit button and radio buttons when i click on the button the form is post successfully and the ajax.BeginForm Work well but the radio buttons also can submit but it returns the partial view and view it without update which means that all the page disappears and just the partial view appears

the model code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AjaxDemo.Models
{
   public class Customer
   {
       public int ID { get; set; }
       public string Name { get; set; }
       public int  Age { get; set; }
   } 
}

the CustomerControler Code is

using AjaxDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AjaxDemo.Controllers
{
    public class CustomerController : Controller
    {
    
        public ActionResult Index()
        { 
           List<Customer> l = new List<Customer>() { new Customer() { Name = "a", ID = 1, Age = 20 },
                                                  new Customer() { Name = "b", ID = 2, Age = 21 },
                                                  new Customer() { Name = "c", ID = 3, Age = 22 },
                                                  new Customer() { Name = "d", ID = 4, Age = 23 },
                                                  new Customer() { Name = "e", ID = 5, Age = 24 },
                                                  new Customer() { Name = "f", ID = 6, Age = 25 },
                                                   };
           Tuple<List<Customer>, Customer> tuple = new Tuple<List<Customer>, Customer>(l, l[0]); 
           return View(tuple);
        }
        [HttpPost]
        public ActionResult GetCustomerDetails(int id)
        {
           List<Customer> l = new List<Customer>() { new Customer() { Name = "a", ID = 1, Age = 20 },
                                                     new Customer() { Name = "b", ID = 2, Age = 21 },
                                                     new Customer() { Name = "c", ID = 3, Age = 22 },
                                                     new Customer() { Name = "d", ID = 4, Age = 23 },
                                                     new Customer() { Name = "e", ID = 5, Age = 24 },
                                                     new Customer() { Name = "f", ID = 6, Age = 25 },
                                                   };
          Tuple<List<Customer>, Customer> tuple = new Tuple<List<Customer>, Customer>(l, l[id-1]);
          return PartialView(@"~\Views\Shared\_CustomerDetails.cshtml", l[id-1]);
        }
    }
 }

The Index View Code is

@using AjaxDemo.Models
@model Tuple<List<Customer>, Customer>
@{
    ViewBag.Title = "Index";
    AjaxOptions ajaxOptions = new AjaxOptions();
    ajaxOptions.UpdateTargetId = "InformationDiv";
    ajaxOptions.HttpMethod = "post";
    ajaxOptions.InsertionMode = InsertionMode.Replace;
}
<h2>Customers</h2>
@using (Ajax.BeginForm("GetCustomerDetails","Customer", ajaxOptions,new { @id = "customerform" }))
{
    foreach (var item in Model.Item1)
    {
        <div>
            @{
               bool selected = item == Model.Item2;
               @Html.RadioButton("id",item.ID,selected,
                                  new{@onchange="$('#customerform').trigger('submit')" })
               @Html.Label(item.Name)
               <br />
             }
       </div>
    }
    <input type="submit" value="Details" id="SubmetButton" />
}
<div id="InformationDiv">
    @Html.Partial("_CustomerDetails", Model.Item2)
</div>

The _CustomerDetails PartialView Code

@model AjaxDemo.Models.Customer
<div>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.ID)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.ID)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Name)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Age)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Age)
        </dd>

    </dl>
</div>

in the layout Code i Imported the files

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>



Aucun commentaire:

Enregistrer un commentaire