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

Posted 2023-05-08

技术标签:

【中文标题】MVC 将表行数据传输到引导模式弹出窗口【英文标题】：MVC transfer Table row data to bootstrap model popup 【发布时间】：2019-01-22 00:12:42 【问题描述】：

我正在使用 bootstrap-table 库在我的 ASP.net MVC 视图中创建一个表。每当用户双击表格行时，要求选择表格行数据并将其传输到模型弹出窗口。

我可以使用 javascript 中的 row[] 数组选择行列值，但我无法通过 Ajax 将其传输到我的控制器。

请在下面找到我的代码 sn-p:-

<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:-

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

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

但我收到的参数 ID 为 null 并且 Ajax 调用失败。

谁能指导我如何实现这一目标？

提前致谢。

【问题讨论】：

data: 'ID: "' + param + '" ' 错误，需要使用data: ID: param 代替。 MVC 操作方法足够智能，可以将传递的 JSON 对象识别为其参数。 @TetsuyaYamamoto 感谢重构解决了这个问题。另外，您需要更改重定向到错误页面的方式，因为 AJAX 不打算执行 RedirectToAction（请参阅答案以获得更好的方法）。 【参考方案1】：

AJAX 回调不打算执行重定向到另一个操作方法（也分配 data 参数与字符串连接像 data: 'ID: "' + param + '" ' 肯定是错误的）。尝试配置 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");
      
    );
);

当异常发生时，控制器动作应该返回 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);