Asp.Net save drop down list value to dabase with ajax

Question

I have a List view with list of task. Each task have state(Active, Stoped, Complete etc). For displaying states I use EnumDropDownListFor. View code:

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.TaskText)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TillDate)
        </td>
        <td>
            @Html.EnumDropDownListFor(modelItem => item.State)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
        </td>
    </tr>
}

And Task class:

public class Task
{
    public int Id { get; set; }
    public string TaskText { get; set; }
    public DateTime TillDate { get; set; }
    public TaskState State { get; set; }
}

public enum TaskState
{
    Active=0,
    Stoped,
    Complete
}

Now I want to change task state on this view. I mean, I want to select state from dropdown and after selection changed, using ajax, call controller action to save it to database.

How can I do this using ajax?

UPD: I'v tryed something like this, but can;t figure out how to get task id:

  function FillCity() {
    var stateId = $('#State').val();
    // var taskId=???
    $.ajax({
        url: '/Home/Edit',
        type: "POST",
        dataType: "JSON",
        data: { State: stateId, taskId: id}
            });
        }
    });
  }

Answer 1

The way you tried is absolutely correct, so for the one thing to get the task id, you can make use of hidden variable to store the id and get through javascript like below.

Your changed code:

I'v tryed something like this, but can;t figure out how to get task id:

function FillCity() {
    var stateId = $('#State').val();
    var taskId=$('#hdntaskid').val()
    $.ajax({
        url: '/Home/Edit',
        type: "POST",
        dataType: "JSON",
        data: { State: stateId, taskId: id}
            });
        }
    });
  }

View Code:

@foreach (var item in Model) {
    <tr>
        <td>
@Html.HiddenFor(model => model.Id, 
                new { id= "hdntaskid", Value = @Model.Id})
        <td>
        <td>
            @Html.DisplayFor(modelItem => item.TaskText)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TillDate)
        </td>
        <td>
            @Html.EnumDropDownListFor(modelItem => item.State)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
        </td>
    </tr>
}

Alternate Js Code:

 $(document).ready(function()  
    {  
        $("#State").on("change", function()  
        { 
          var stateId = $(this).val();
          var taskid = $(this).parent().siblings().find('#hdntaskid');
 $.ajax({
        url: '/Home/Edit',
        type: "POST",
        dataType: "JSON",
        data: { State: stateId, taskId: id}
            });

   });  
        });

Hope above information was helpful

thanks

Karthik

Answer 2

You can listen to the change event on the SELECT element, read the selected value and and send it to server (an action method) via ajax where you can save it.

Since we need the task id as well, Let's keep that in data attribute of the SELECT element. We will also use the Url.Action helper method to generate the correct relative path to the server action method which will be called from the ajax code and will save values.

@Html.EnumDropDownListFor(modelItem => item.State, new { data_taskid=item.Id,
                                           data_url=Url.Action("SaveStatus")})

This will render the SELECT element with data attribute "taskid" and "url" ( See the generated html markup by checking the "view source" of the page)

Now the javascript to listen to the change event and make the ajax call

$(function(){

  $("SELECT[name='State']").change(function() {
     var taskId=$(this).data("taskid");
     var stateId=$(this).val();

     $.post($(this).data("url"),{ task : taskId, state : stateId},function(re){
        // to do : Do something once ajax call is successful            
     });
  });

});

Assuming that you have an action method called SaveStatus which has 2 parameters, task and state

[HttpPost]
public ActionResult SaveStatus(int task,int state)
{
  // TO DO : Save the data using the values of task and state
  return Json(new { status="success"});
}