Asp.Net 使用 ajax 将下拉列表值保存到数据库答案

【问题标题】：Asp.Net save drop down list value to dabase with ajaxAsp.Net 使用 ajax 将下拉列表值保存到数据库
【发布时间】：2017-06-25 17:55:49
【问题描述】：

我有一个包含任务列表的列表视图。每个任务都有状态（活动、停止、完成等）。为了显示状态，我使用 EnumDropDownListFor。查看代码：

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

和任务类：

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
}

现在我想更改此视图上的任务状态。我的意思是，我想从下拉列表中选择状态，在选择更改后，使用 ajax 调用控制器操作将其保存到数据库。

如何使用 ajax 做到这一点？

统一更新： 我已经尝试过这样的事情，但无法弄清楚如何获取任务 ID：

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

【问题讨论】：

你能分享你已经拥有的Ajax调用代码吗？如果有的话。或者你迄今为止尝试过的任何东西。
@R.Richards 我要添加，但不确定它是否可以工作

标签： asp.net ajax asp.net-mvc

【解决方案1】：

你尝试的方式是绝对正确的，所以为了获取任务id，你可以利用隐藏变量来存储id并通过javascript获取如下。

您更改的代码：

我尝试过类似的方法，但不知道如何获取任务 ID：

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

查看代码：

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

替代Js代码：

 $(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}
            });

   });  
        });

希望以上信息对您有所帮助

谢谢

卡提克

【讨论】：

【解决方案2】：

您可以在 SELECT 元素上监听 change 事件，读取选定的值并通过 ajax 将其发送到服务器（一种操作方法），您可以在其中保存它。

由于我们还需要任务 ID，所以我们将其保存在 SELECT 元素的 data 属性中。我们还将使用 Url.Action 辅助方法生成服务器操作方法的正确相对路径，该方法将从 ajax 代码中调用并保存值。

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

这将呈现带有数据属性“taskid”和“url”的 SELECT 元素（通过检查页面的“查看源”查看生成的 html 标记）

现在 javascript 监听 change 事件并进行 ajax 调用

$(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            
     });
  });

});

假设您有一个名为 SaveStatus 的操作方法，它有 2 个参数，任务和状态

[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"});
}

【讨论】：