MVC视图-> JavaScript->控制器方法-> Javascript-> Div标签

Question

我有一个创建，编辑，删除应用程序。在我的索引视图中，有用于编辑的按钮。 通过单击此按钮，它将打开弹出窗口，其中应显示所有数据以进行编辑。

为了实现这一点，我通过了正在编辑的那一行的ID。 参见下面的代码：

  <td>
    <button type="button" onclick="EditPopup(@item.Id)">Edit</button>
    </td>

在这里，我正在将ID传递给我的EditPopup javascript方法。 参见下面的方法：

<script type="text/javascript">
$(document).ready(function () {
    $("#EditDialog").dialog({
        autoOpen: false,
        title: 'Title',
        width: 'auto',
        height: 'auto',
        modal: true
    });
});

function EditPopup(Get_Id) {
   alert(Get_Id) // I am getting correct ID here.
    $.ajax({

        method: "POST",
        url: '@Url.Action("Edit","Home")',
        dataType: 'json',
        cache: false,
        data:{Get_Id}, // tried : {id:Get_Id} , {id:"Get_Id"} not working
        success: function (data) {

            $('#EditDialog').html(data);
        }

    });
    $("#EditDialog").dialog("open");
}</script>

我正在将ID的值发送到我的Controller方法。这就是为什么我在ajax调用中使用Post方法的原因。 Edit是方法的名称，Home是控制器的名称。

HomeController编辑方法

 [HttpPost]
    public JsonResult Edit(int? id)
    {

        FloorFactor floorFactor = db.FloorFactors.Find(id);

        return Json(floorFactor, JsonRequestBehavior.AllowGet);
    }

    // POST: 
    [HttpPost]
    public ActionResult Edit(int id, FormCollection collection)
    {

        FloorFactor floorFactor = db.FloorFactors.Find(id);

        return View(floorFactor);
    }

在几个示例中，我看到在ajax调用中，它们通常使用json结果方法。 所以这就是我也使用json结果方法的原因。

最后在我的索引视图中的代码，我将显示弹出结果。

<div id="EditDialog" style="display:none;">
<label> Floor Factor </label>
<br />
<label> Effective From :</label>

所以整个场景是：

我将按钮点击事件的ID值发送给javascript。
在JavaScript上，我打电话给我的控制器方法来获取数据。
这些应该在div的EditDialog框中传递。
在div块上，它应该显示在弹出窗口中。

电流输出

我还想了解ajax调用中url字段的工作方式。
如果我将多列结果作为该URL的输出，如何在ajax调用的Data部分中收集所有输出。
还请说明成功后我可以在函数中传递哪些参数。

感谢您的解释和帮助。

编辑：控制台选项卡上没有显示错误。 如该脚本选项卡所示，我认为它正在发送请求，因为它生成了请求ID。

Answer 1

尝试以下更改

动作代码：

[HttpPost]
    public JsonResult Edit(int? id)
    {

        FloorFactor floorFactor = db.FloorFactors.Find(id);

        return Json(floorFactor, JsonRequestBehavior.AllowGet);
    }

查看变更

<div id="EditDialog" style="display:none;">
<label> Floor Factor </label> <span id="floorFactor"></span>
<br />
<label> Effective From :</label> <span id="effectiveFrom"></span>

成功方法变更

      if(data)
      {
//  GET VALUES
         var floorFactor = data.Property_Having_FloorFactor;
         var effectiveFrom = data.Property_Having_EffectiveFrom; 
// ASSIGN VALUES
         $('#floorFactor').text(floorFactor);
         $('#effectiveFrom ').text(effectiveFrom );
// OPEN DIALOG
         $("#EditDialog").dialog("open");
      }

希望它对您有用。

Answer 2

将Controller更改为

[HttpGet]
public JsonResult Edit(int? id)
{

    FloorFactor floorFactor = db.FloorFactors.Find(id);

    return Json(floorFactor, JsonRequestBehavior.AllowGet);
}

// POST: 
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{

    FloorFactor floorFactor = db.FloorFactors.Find(id);

    return View(floorFactor);
}

将“ ajax”更改为

$.ajax({
    method: "GET",
    url: '@Url.Action("Edit","Home")',
    dataType: 'json',
    cache: false,
    data: {id:Get_Id},
    success: function (data) {
        $('#EditDialog').html(data);
    }
});

注意：代码未经测试。 它应该为您工作。