Submiting the ajax form

(ASP.NET MVC)


Hi,
In this article i discuss about submiting the ajax form by clicking the submit button inside the ajax form.

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="submit" id="btn_submitform" value="Submit Customer Info" />
            </td>
        </tr>
    </tbody>
</table>
}

    </div>


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;
        }

CustomerUiModel

 public class CustomerUimodel
    {
        //for personal Details
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
        public string AccountType { get; set; }    

        //for customer address
        public string Address1 { get; set; }
        public string Address2 { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string zipCode { get; set; }
        public string Country { get; set; }

    }

Image

Ratings


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

Comments