Altaf Khatri
Altaf Khatri



RSS feed for http://www.AltafKhatri.com website. Twitter account of http://www.AltafKhatri.com website.
∗Recently Added - How to take care of Betta fighter fish and increase life span?  10/30/2013


Find me on web

 LinkedIn

 Facebook

 Twitter

How to postback on index change of ASP.net MVC dropdownlist?

In this article I am going to discuss how to postback a form on ASP.Net MVC dropdownlist's selected item's index change.

There are options like using AJAX callbacks on selectedIndex change of dropdownlist but sometimes it is needed that you postback the entire form and render it again. Some say that ASP.NET MVC is not built for that kind of architecture as it's main intention is to solve the Search Engine Optimization(SEO) problems. But lets say, there is a genuine need for the implementation of posting back the entire page, process the details on the server side and return back the results. This is what we are going to discuss in this article.

The solution is simple and has taken care of scenario where you have other form elements. All the form elements are encapsulated in a class called CoverObject. List of items in the dropdownlist is all part of this CoverObject.

Steps to create the postback in ASP.Net MVC dropdownlist selectedindex change event:

  1. Create a controller - Dropdownlist. Paste the code in the section below.
  2. Create a view of the GetDD action binded to the strongly typed object(CoverObject). Paste the code in the section below.

Code in the controller

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Mvc.Ajax;

 

namespace MvcApplication1.Controllers

{

    public class CoverObject

    {

        public IList<SelectListItem> iliSLI;

        public string SelectedName { get; set; }

        public string Name { get; set; }

        public string Address { get; set; }

       

        public string formAction { get; set; }

 

        public CoverObject()

        {

            iliSLI = new List<SelectListItem>();

            SelectListItem sli = new SelectListItem();

            sli.Text = "Altaf";

            sli.Value = "1";

 

            iliSLI.Add(sli);

 

            sli = new SelectListItem();

            sli.Text = "Krish";

            sli.Value = "22";

            iliSLI.Add(sli);

 

            sli = new SelectListItem();

            sli.Text = "Sameer";

            sli.Value = "3333";

            iliSLI.Add(sli);

 

            sli = new SelectListItem();

            sli.Text = "Iqbal";

            sli.Value = "44444";

            iliSLI.Add(sli);

 

            sli = new SelectListItem();

            sli.Text = "Maimoona";

            sli.Value = "5555";

            iliSLI.Add(sli);

 

        }

    }

    public class DropdownlistController : Controller

    {

        //

        // GET: /Dropdownlist/

        public ActionResult Index()

        {

            return View();

        }

 

        public ActionResult GetDD()

        {

            CoverObject co = new CoverObject();

            co.formAction = "";

            //ViewData["SecretQuestion"] = co.iliSLI;

            return View(co);

        }

 

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult GetDD(CoverObject co)

        {

            CoverObject coNew = new CoverObject();

            string indexChangedValue = co.SelectedName;

 

 

            var item = from it in coNew.iliSLI

                       where it.Value == co.SelectedName

                       select it;

            item.First().Selected = true;

            coNew.Name = item.First().Text;

            coNew.Address = co.Address;

 

 

            if (!string.IsNullOrEmpty(co.formAction) && co.formAction.Equals("Submit Form By Clicking"))

            {

                // Based on the main submit of the form, it can process and redirect or stay on the same view.

                ModelState.AddModelError("_FORM", "Form Submitted by clicking submit button");

            }

            else//Submitted by dropdownlist index change event

            {  

                //DROPDOWNLIST on selectedIndexChangedEvent Handled hereModelState.AddModelError("_FORM", "Form Submitted by clicking submit button");

                ModelState.AddModelError("iliSLI", "Form Submitted by selected Index Change event");

            }

            return View(coNew);

        }

    }

}

 

Code in the aspx file

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Controllers.CoverObject>" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>GetDD</title>

    <style>

    .validation-summary-errors

    {

        font-weight: bold;

        color: #0000ff;

    }

 

    </style>

</head>

<body>

    <%= Html.ValidationSummary("Form submitted by what event notification:") %>

 

    <% using (Html.BeginForm()) {%>

 

        <fieldset>

            <legend>Fields</legend>

           

            <p>

                <label for="Address">Address:</label>

                <%= Html.TextBox("co.Address", Model.Address)%>

                <%= Html.ValidationMessage("Address", "*") %>

            </p>

           

            <p>

                <label for="Address">Please select Name:</label>

                <%= Html.DropDownList("co.SelectedName", Model.iliSLI, new { onChange = "onSelectedIndexChanged()" })%>

                <%= Html.ValidationMessage("iliSLI", "*") %>

            </p>

           

            <p>

                <label for="Name">Selected Name:</label>

                <%= Html.TextBox("Name", Model.Name, new { disabled="true" })%>

                <%= Html.ValidationMessage("Name", "*") %>

            </p>

           

            <p>

                <input type="submit" value="Submit Form By Clicking" name="co.formAction"/>

            </p>

        </fieldset>

 

    <% } %>

    <script type="text/javascript">

        function onSelectedIndexChanged() {

            var sub = document.getElementsByName("co.formAction");

            sub.value = "";

            document.forms[0].submit();

        }

    </script>

</body>

</html>

 





SiteMap  |  Contact Me