Submiting the ajax form through ajax call

(ASP.NET MVC)


Hi,
In this article i discuss about submiting the ajax form through ajax call.

nestedpartialViews.cshtml

@{
    ViewBag.Title = "nestedpartialViews";
}

@model MVCRANDD.Controllers.CustomerUimodel

<h2>Rendering Customer Personal Details and Address Details Partial Views in this view</h2>

<div id="div_custinfo">

@using (Ajax.BeginForm("nestedpartialViews", "Home", new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "div_custinfo" }, new { id = "form_custinfo" }))
{
   
<table>
    <thead>
        <tr>
            <th>
                <label>Customer Details</label>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>
               @Html.Partial("Personalinfopview",this.Model)
           </td>
        </tr>
        <tr>
            <td>
                @Html.Partial("Addresspview",this.Model)
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="btn_submit" value="Submit Customer Info(AJAX)" />
            </td>
        </tr>
    </tbody>
</table>
}

    </div>

<script type="text/javascript">

    $(function () {

        //submiting the form through ajax call
        $('#btn_submit').click(function () {
            var form = $('#form_custinfo');

            $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: form.serialize() + "&sampledata=" + "sample",
                success: function (data) {

                    $('#div_custinfo').html(data);
                }
            });
        });
    });

</script>


PersonalInfoView.cshtml

@model MVCRANDD.Controllers.CustomerUimodel

<div id="div_custpersonal">

<table>
    <thead>
        <tr>
            <th>
                Customer Personal Details
            </th>
        </tr>
    </thead>
 <tbody>
     <tr>
<td>
    @Html.LabelFor(cust=>cust.FirstName)
</td>
         <td>
             @Html.TextBoxFor(cust=>cust.FirstName)
         </td>
     </tr>
     <tr>
         <td>
             @Html.LabelFor(cust=>cust.LastName)
         </td>
         <td>
             @Html.TextBoxFor(cust=>cust.LastName)
         </td>
     </tr>
     <tr>
         <td>
             @Html.LabelFor(cust=>cust.AccountType)
         </td>
         <td>
             @Html.TextBoxFor(cust=>cust.AccountType)
         </td>
     </tr>
     <tr>
         <td>
             @Html.LabelFor(cust=>cust.Age)
         </td>
         <td>
             @Html.TextBoxFor(cust=>cust.Age)
         </td>
     </tr>
 </tbody>
</table>
    </div>


Addresspview.cshtml

@model MVCRANDD.Controllers.CustomerUimodel

<div id="div_custaddress">
    <table>
        <thead>
            <tr>
                <th>
                    Customer Address Details
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    @Html.LabelFor(cust => cust.Address1)
                </td>
                <td>
                    @Html.TextBoxFor(cust => cust.Address1)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(cust=>cust.Address2)
                </td>
                <td>
                    @Html.TextBoxFor(cust=>cust.Address2)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(cust=>cust.City)
                </td>
                <td>
                    @Html.TextBoxFor(cust=>cust.City)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(cust=>cust.State)
                </td>
                <td>
                    @Html.TextBoxFor(cust=>cust.State)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(cust=>cust.zipCode)
                </td>
                <td>
                    @Html.TextBoxFor(cust=>cust.zipCode)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(cust=>cust.Country)
                </td>
                <td>
                    @Html.TextBoxFor(cust=>cust.Country)
                </td>
            </tr>
        </tbody>
    </table>
</div>

Confirmation.cshtml

<h1>
    Customer Info Saved Successfully
</h1>

Controller

       //Nested Partial Views
        public ActionResult nestedpartialViews()
        {
            try
            {
                return View();
            }
            catch (Exception)
            { }

            return null;
        }


        //Example for nested partial views
        [HttpPost]
        public ActionResult nestedpartialViews(CustomerUimodel model)
        {
            try
            {
                //to get the posted data as query string
                string sampledata = Request.Form["sampledata"];

                if (ModelState.IsValid)
                {
                    //if it is valid, do the logic
                }

                return PartialView("Confirmation");
            }
            catch (Exception)
            { }

            return null;
        }

Image

Ratings


Average Rating: 0.00 by 0 users
Giri Prasad
10/4/2013
10/4/2013
Download PDF

Comments