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标记包含必要的网址：

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

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

1 个答案: