CODEWITHSUNDEEP
asp.net-mvc
Sanjay
Sanjay

Reputation: 1236

How to Prevent Page refresh on select change for dropdownlist in MVC

I have a dropdownlist in my razor view MVC like

   @Html.DropDownListFor(n => n.EMP_ID, (SelectList)ViewBag.EmployeeList,  new { @id = "ddlemployee" },"---choose an Employee Name--").

I have applied select change event to drop-down using jquery, when select Employee name getting Employee names and realted data, but problem is when i select a value in drop-down, dropdownlist setting again set to default first value,

It is not sticking to particular selected value, in terms of Asp.net terminology, how to prevent postback to dropdownlist?

        //Redirected to Controller  
        <script>
        $(document).ready(function () {
            $("#ddlemployee").change(function () {
                location.href ='@Url.Action("GetEmployeeDetails", "Employer")'
            });
        });
        </script>

        //Action Method in Employer Controller
        public ActionResult GetEmployeeDetails(Timesheetmodel model)
        {
        try
        {
            ViewBag.EmployeeList = objts.getEmployeeNames();

            var emps = from n in db.TIMESHEETs
                       where n.RES_ID == model.EMP_ID
                       select n;
            int count = emps.Count();

            foreach (TIMESHEET ts in emps)
            {
                model.PROJ_ID = ts.PROJ_ID;
                model.SUN_HRS = ts.SUN_HRS;
                model.MON_HRS = ts.MON_HRS;
                model.TUE_HRS = ts.TUE_HRS;
                model.WED_HRS = ts.WED_HRS;
                model.THU_HRS = ts.THU_HRS;
                model.FRI_HRS = ts.FRI_HRS;
                model.SAT_HRS = ts.SAT_HRS;
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
        return View("Timesheet", model);
    }

Upvotes: 2

Views: 4906

Answers (2)

Sai Avinash
Sai Avinash

Reputation: 4753

ASP.Net Webforms achieve StateFullness by using Some thing called ViewState

It is implemented as hidden fields in the page to hold data between requests.

This way , asp.net webforms achieves post back mechanism and was able to hold values in bewteen the requests.

Since Http is a stateless protocol , which means it has no relation between requests.

View State is absent in ASP.Net MVC.

So, you have to stop postback by partially posting back . Which means that you need to send an asynchronous request with out refreshing whole page.

It is possible by using AJAX. You can either use

 MVC Ajax or Jquery Ajax.

By using AJax, we can eliminate the post back and then do the partial post back.

Solution:

$("#dropdownid").change(function(event e)
{
     //Make your ajax request here..
});

Hope this helps

Updated:

$("#dropdownid").change(function () {
    $.ajax({
        type: "post",
        contentType: "application/json;charset=utf-8",
        url: /*Your URL*/,
        success: function (data) {
            //do your callback operation  
        }                  
    });
});

Upvotes: 1

Sanjay
Sanjay

Reputation: 1236

Got it.

Passing Empid as querystring from jquery like:

       <script>
        $(document).ready(function () {
            $("#ddlemployee").change(function () {
                debugger;
                var empid = $("#ddlemployee").val();
                location.href = '@Url.Action("GetEmployeeDetails", "Employer")?empid=' + empid ;

        });
    });
       </script>

and assign "empid " to model "Empid" in Action method before foreach loop like

        model.EMP_ID = empid;//in Controller Action Method before foreachloop of my code
                             // and this model.EMP_ID binded to dropdownlist.

this EMP_ID passes same id to dropdownlist which was selected. Thats it.

Upvotes: 0

Related Questions