MVC将表行数据传输到引导模型弹出窗口

Question

I'm using bootstrap-table library to create a table in my ASP.net MVC view. 我正在使用引导表库在ASP.net MVC视图中创建表。 Whenever the user double click on the table row, requirement is to pick the table row data and transfer it to a model popup. 每当用户双击表格行时，要求选择表格行数据并将其传输到模型弹出窗口。

I'm able to pick the row column values using row[] array in Javascript but I'm not able to transfer it to my controller through Ajax. 我可以使用Javascript中的row []数组来选择行列值，但无法通过Ajax将其传输到我的控制器中。

Please find below my code snippet:- 请在我的代码段下面找到：

<html lang="en-AU">
<head>
<script>

$(document).ready(function () {

$('#tblID').bootstrapTable({ locale: 'en-US' }).on('click-row.bs.table', function (e, row, $element) {

var param = row[2]; //fetching 3rd column value

$.ajax({
      type: "GET",
      url: '@Url.Action("_SampleAction", "SampleController")',
      data: '{ID: "' + param + '" }',
      datatype: "json",
      success: function (result) {
      $('#myModelContent').html(result);
      $("#myModal").modal('show');
      },
      error: function (req, status, error) {
           alert("Error!Occured");
      }
    });

});

});

</script>
</head>

<body>

<table id="tblID" class="table table-hover" data-search="true" data-show-columns="true" data-mobile-responsive="true" data-striped="true" data-toggle="table" data-sort-name="Salary" data-sort-order="desc" data-pagination="true" data-smart-display="true" data-filter-control="true" data-show-export="true" data-click-to-select="true" data-page-list="[5, 10, 25, 50, 100, ALL]" data-export-options='{"fileName": "ActiveList","ignoreColumn": ["state"]}'>

    <thead>
            <tr>
                @foreach (DataColumn col in Model.Details.Columns)
                {
                    <th class="TableRowHeader" data-sortable="true" data-filter-control="Select">@col.ColumnName</th>
                }
            </tr>
    </thead>
    <tbody>
            @foreach (DataRow row in Model.MonitorDetails.Rows)
            {
                <tr>
                    @foreach (DataColumn col in Model.MonitorDetails.Columns)
                    {
            <td class="TableBody">@row[col.ColumnName]</td>
            }
                </tr>
            }
        </tbody>
</table>

    <div class="modal fade" tabindex="-1" id="myModal" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content" style="width: auto;">
                <div id='myModalContent'></div>
            </div>
        </div>
    </div>

</body>
</html>

SampleController:- SampleController： -

public ActionResult _SampleAction(string ID)
    {
        MyModel objMyModel  = new MyModel ();
        objMyModel.ID = ID;
        try
        {
            return PartialView("_SampleAction", objMyModel);

        }
        catch (Exception ex)
        {
            return RedirectToAction("Index", "Error");
        }
    }

But I'm receiving parameter ID as null and Ajax call fails. 但是我收到的参数ID为null，Ajax调用失败。

Can anyone please guide me on how to achieve this? 谁能指导我如何实现这一目标？

Thanks in advance. 提前致谢。

Answer 1

AJAX callback is not intended to perform redirection to another action method (also assigning data parameter with string concatenation like data: '{ID: "' + param + '" }' is definitely wrong). AJAX回调不打算执行到另一种操作方法的重定向（还使用字符串串联（例如data: '{ID: "' + param + '" }' ）分配data参数是绝对错误的）。 Try configure AJAX callback to find out if error message exists like this: 尝试配置AJAX回调以找出是否存在如下错误消息：

$.ajax({
      type: "GET",
      url: '@Url.Action("_SampleAction", "SampleController")',
      data: { ID: param }, // proper way to pass string to controller with AJAX

      // other AJAX settings

      success: function (result) {
          if (result.message == undefined) {
              $('#myModelContent').html(result);
              $("#myModal").modal('show');
          } else {
              // set redirection here instead of using RedirectToAction from controller
              window.location.href = result.url;
          }
      },
      error: function (req, status, error) {
           alert("Error occurred");
      }
    });
});

And the controller action should return JSON data when exception occurs, as given below: 并且在发生异常时，控制器操作应返回JSON数据，如下所示：

public ActionResult _SampleAction(string ID)
{
    MyModel objMyModel = new MyModel();
    objMyModel.ID = ID;
    try
    {
        // do something

        return PartialView("_SampleAction", objMyModel);
    }
    catch (Exception ex)
    {
        return Json(new { url = Url.Action("Index", "Error"), message = ex.Message }, JsonRequestBehavior.AllowGet);
    }
}

Related issue: 相关问题：

RedirectToAction not working after successful jquery ajax post? 成功的jQuery Ajax发布后，RedirectToAction无法正常工作？

MVC将表行数据传输到引导模型弹出窗口

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-08-15 05:59:45

MVC将表行数据传输到引导模型弹出窗口

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-08-15 05:59:45

解决方案1
0 已采纳 2018-08-15 05:59:45