将脚本放置在与模型紧密绑定的局部视图中的最佳实践？

Question

我听说我们不应该在部分视图中使用脚本标签。但是，当脚本使用局部视图模型时，如何避免在局部视图下方使用脚本？建议我更好的方法。

@model AddressBookMVC.Models.Contact
<div class="contact-information">
  <ul
    <li>
        <a href="#" id="edit">EDIT</a>
        <a href="#" id="edit">DELETE</a>
    </li>
   </ul>
    <div id="name" class="detailed-contact">
        @Html.DisplayFor(model => model.Name)
    </div>

    <div id="email" class="detailed-contact">
        Email:
        @Html.DisplayFor(model => model.Email)
    </div>
    <div>
        <span id="mobile" class="detailed-contact">
            Mobile:
            @Html.DisplayFor(model => model.Mobile)
        </span>

    </div>

</div>
<script>
    $('#edit').on('click', function()
    {
        $.ajax({
            url: '@Url.Action("EditContact", "Contacts")',
            type: 'get',

            //Here I am using model
            **data:{contactID:@Model.ContactID}**
        }).done(function(partialView)
        {
            $('#sidePanel').html(partialView);
        })
    })
</script>

Answer 1

您可以让您的 #edit 标记包含必要的 url:

<div id="edit" data-url="@Url.Action("EditContact", "Contacts", new { contactID = Model.ContactID })">
    Click me for the fun stuff
</div>

然后在主布局中包含的单独 javascript 文件中剩下要做的就是：

$('#edit').on('click', function() {
    var url = $(this).data('url');
    $.ajax({
        url: url,
        type: 'GET',
    }).done(function(partialView) {
        $('#sidePanel').html(partialView);
    })
});

如您所见，您的 javascript 不再依赖于任何特定于模型的内容 - 它所做的只是依赖于 DOM 中已有的内容。 DOM 中已有的内容是您的局部视图需要处理的内容，以便包含所有必需的详细信息。所以现在你可以将这个 javascript 移动到一个单独的文件中，并利用 js 组合和缩小等功能。当然，你的部分绝对没有任何 javascript.

将脚本放置在与模型紧密绑定的局部视图中的最佳实践？

Best practice to place scripts in partial view which is tightly bound to model?

c#

asp.net-mvc

partial-views

model-binding