Javascript 使用部分视图、JQuery和引导模式编辑记录

我有一个表，表上最后一列的每条记录都有一个编辑按钮

我的目标是在模式上为用户按下

Edit

按钮的记录创建一个可编辑表单

为了实现这一点，我创建了一个局部视图，我想将其加载到模态上，但经过大量尝试后，我无法使其工作。为组成部分视图URL并加载到模式中而创建的JS似乎没有效果，它引发了以下错误：

VM364 ESa31501901:361未捕获的引用错误：ESa31501901未捕获 定义 在HTMLanchoreElement.onclick

注意：ESa31501901是传入JS函数的第一个参数

这是我的意图：

a）

Edit（）

：此方法将返回所有记录

b）

EditClientFeature（string ClientID，string WorkProcessID）

：此方法将返回包含特定客户端记录的部分视图。当我们开始编辑客户机记录时，将调用此方法。客户端记录以模式显示（弹出窗口）

c）

EditClientFeature（ClientFeatureViewModel模型）

：此方法将更新客户端记录

客户端功能视图模型

public class ClientFeatureViewModel
{
    public string ClientID { get; set; }
    public string WorkProcessID { get; set; }
    public int? Certification { get; set; }
    public bool? TrackingActive { get; set; }
    public string ClientCode { get; set; }
    public string ContractNo { get; set; }
    public string ProductCode { get; set; }
}

[...]

<tbody>
@foreach (var feature in Model.ClientFeatures)
{
 <tr>
     <td style="text-align:center"><strong>@feature.WorkProcessId</strong>/td>
     <td style="text-align:center">@feature.Certificate</td>
     <td style="text-align:center">@feature.TrackingActive</td>
     <td style="text-align:center">@feature.ClientCode</td>
     <td style="text-align:center">@feature.ContractNo</td>
     <td style="text-align:center">@feature.ProductCode</td>
     <td>
       <a href="#" class="btn btn-success" onclick="EditCF(@Model.Piva, @feature.WorkProcessId)"><i class="glyphicon glyphicon-pencil"></i></a>                                                                                                                                                                
    </td>
    </tr>
}
</tbody>

[...]

    <div class="modal fade" id="ModalClientFeatures">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h3 class="modal-title">Edit</h3>
                </div>
                <div class="modal-body" id="ModalBodyDiv">

                  <!-- Here's where i want to show the partial view-->

                </div>
            </div>
        </div>
    </div>

[...]

<script>    
        function EditCF(ClientID, WorkProcessID) {

            var url = "/Admin/EditClientFeature?ClientID=" + ClientID + "?WorkProcessID=" + WorkProcessID;

            $("#ModalBodyDiv").load(url, function () {
                $("#ModalClientFeatures").modal("show");

            })

        }
</script>

@model Project.Models.ClientFeatureViewModel

<script src="~/Scripts/jquery-3.3.1.js"></script>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

<form id="myForm">

    <div class="form-horizontal">
        <h4>ClientFeatureViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.ClientID)

        <div class="form-group">
            @Html.LabelFor(model => model.WorkProcessID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.WorkProcessID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.WorkProcessID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Certification, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Certification, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Certification, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.TrackingActive, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.EditorFor(model => model.TrackingActive)
                    @Html.ValidationMessageFor(model => model.TrackingActive, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ClientCode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ClientCode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ClientCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ContractNo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ContractNo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ContractNo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ProductCode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ProductCode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ProductCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
                <a href="#" id="btnSubmit" class="btn btn-success btn-block">
                    <span>Update</span>
                </a>
            </div>
        </div>

    </div>
</form>
}

Edit.cshtml

public class ClientFeatureViewModel
{
    public string ClientID { get; set; }
    public string WorkProcessID { get; set; }
    public int? Certification { get; set; }
    public bool? TrackingActive { get; set; }
    public string ClientCode { get; set; }
    public string ContractNo { get; set; }
    public string ProductCode { get; set; }
}

[...]

<tbody>
@foreach (var feature in Model.ClientFeatures)
{
 <tr>
     <td style="text-align:center"><strong>@feature.WorkProcessId</strong>/td>
     <td style="text-align:center">@feature.Certificate</td>
     <td style="text-align:center">@feature.TrackingActive</td>
     <td style="text-align:center">@feature.ClientCode</td>
     <td style="text-align:center">@feature.ContractNo</td>
     <td style="text-align:center">@feature.ProductCode</td>
     <td>
       <a href="#" class="btn btn-success" onclick="EditCF(@Model.Piva, @feature.WorkProcessId)"><i class="glyphicon glyphicon-pencil"></i></a>                                                                                                                                                                
    </td>
    </tr>
}
</tbody>

[...]

    <div class="modal fade" id="ModalClientFeatures">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h3 class="modal-title">Edit</h3>
                </div>
                <div class="modal-body" id="ModalBodyDiv">

                  <!-- Here's where i want to show the partial view-->

                </div>
            </div>
        </div>
    </div>

[...]

<script>    
        function EditCF(ClientID, WorkProcessID) {

            var url = "/Admin/EditClientFeature?ClientID=" + ClientID + "?WorkProcessID=" + WorkProcessID;

            $("#ModalBodyDiv").load(url, function () {
                $("#ModalClientFeatures").modal("show");

            })

        }
</script>

@model Project.Models.ClientFeatureViewModel

<script src="~/Scripts/jquery-3.3.1.js"></script>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

<form id="myForm">

    <div class="form-horizontal">
        <h4>ClientFeatureViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.ClientID)

        <div class="form-group">
            @Html.LabelFor(model => model.WorkProcessID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.WorkProcessID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.WorkProcessID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Certification, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Certification, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Certification, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.TrackingActive, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.EditorFor(model => model.TrackingActive)
                    @Html.ValidationMessageFor(model => model.TrackingActive, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ClientCode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ClientCode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ClientCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ContractNo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ContractNo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ContractNo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ProductCode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ProductCode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ProductCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
                <a href="#" id="btnSubmit" class="btn btn-success btn-block">
                    <span>Update</span>
                </a>
            </div>
        </div>

    </div>
</form>
}

---

我认为您的

onclick

函数参数值被视为变量，而不是字符串

解决方案1:

尝试以下作为字符串传递：（但未测试！）

解决方案2:

在为链接添加类之后，最好附加一个

click

处理程序。并使用

HTML5

在客户端存储您的价值

<a href="#" class="btn btn-success editClient" data-ClientID="@Model.Piva" data-WorkProcessId="@feature.WorkProcessId"><i class="glyphicon glyphicon-pencil"></i></a> 


$('.editClient).on('click', function() {
    var clientID = $(this).data('ClientID');
    var workProcessId = $(this).data('WorkProcessId');

    var url = "/Admin/EditClientFeature?ClientID=" + clientID 
    + "?WorkProcessID=" + workProcessID;

    $("#ModalBodyDiv").load(url, function () {

      $("#ModalClientFeatures").modal("show");

    })

});   

$（'.editClient）.on（'click'，function（）{
var clientID=$（this.data（'clientID'）；
var workProcessId=$（this.data（'workProcessId'）；
var url=“/Admin/EditClientFeature？ClientID=“+ClientID
+“？WorkProcessID=“+WorkProcessID；
$（“#ModalBodyDiv”）.load（url，函数（）{
$（“#ModalClient功能”）.modal（“显示”）；
})
});   

---

希望这有帮助

谢谢你的提示！。我试过了，效果很好。模态与局部视图的内容一起显示。但有一个问题。形成的url是正确的（在加载模式之前，我检查了显示

警报（url）；

），但是传递到控制器方法的参数是错误的。ClientID带有

“ESa31501901？WorkProcessID=BCC\u BN\u FR”

值，WorkProcessID带有

null

。你知道为什么吗？@equisde，你试过解决方案1吗？没有！我直接选择了我认为更正确的选项：-D让我试试，我会回复结果。谢谢@equisde ok，顺便说一句，如果url是正确的，那么它应该将正确的值传递给您的

操作方法

。请检查参数名称，它应该匹配。最后我让它工作。正如你所说，url的格式是错误的。使用

var url=“/Admin/EditClientFeature？ClientID=“+ClientID+”&WorkProcessID=“+WorkProcessID。谢谢大家！