Question

_Layout.cshtml已经有一个容器div用于整个身体。对于部分视图，我应该在每个视图上添加另一个容器div还是主要容器？我不介意添加额外的代码，但我想知道关于这个主题的最佳实践。

  <div class="container body-content" >
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year/p>
    </footer>
</div>

Answer 1

没有必要为部分视图使用特定容器。但是，如果您正在使用AJAX并且只想刷新标记的某些非常特定的部分（而不是布局为您提供的整个div），那么将其包装在容器中会有所帮助。

所以我想说如果需要，你应该在局部视图周围添加一个容器。

Answer 2

我在部分视图中添加容器的原因仅仅是为了使用ajax JSON结果填充它，或者用于组织目的。将部分视图视为Web窗体中的Web控制器。使用容器的需要完全取决于您使用它的目的。所以，答案是否定的，您不需要将部分视图放在容器中。对于最佳实践方法，您应该。但是，依赖于视图的复杂程度，父视图在技术上是您的部分容器。

例如。假设您有标签内容，并且每个内容都是局部视图。如果你将它放在一个容器中，你现在可以向一个返回JSOn的控制器动作发出ajax请求，以填充该部分视图。

示例：这是我放置局部视图的内容区域。

<div id="selectLanguageWrapper">
<!-- the model is supplied via modal load via jquery-->
<div id="selectLanguageModal" class="modal  fade" tabindex="-1" data-width="500">
</div>

观点在这里：

 @model SiteModel

<!-- user input modal  -->    
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Create Site</h3>
    </div>
    <div class="modal-body">
        <div class="row">   
            @using (Html.BeginForm("CreateSite", "Settings", FormMethod.Post, new { @class = "form-horizontal col-md-10", role = "form", id = "createSiteForm" }))
            {               
                <div class="form-group form-inline">
                    @Html.TextBoxFor(sm => sm.Name, new { @class = "form-control", @placeholder = "Site Name"})
                    <a href="#" data-toggle="tooltip" title="text tooltip"><span class="glyphicon glyphicon-question-sign"></span></a>
                    @Html.ValidationMessageFor(sm => sm.Name)
                 </div>
                 <div>
                    @Html.HiddenFor(m => m.EnvironmentID)                   
                 </div>
            }
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary btn-xs" id="createSiteButton">@Resources.Create</button>
        <button type="submit" class="btn btn-primary btn-xs" data-dismiss="modal" id="cancelButton">@Resources.Cancel</button>
    </div>

控制器返回视图

public ActionResult LoadCreateSite(int id)
        {
            SiteModel model = new SiteModel()
            {
                EnvironmentID = id,

                PrimaryLanguageID = Settings.DefaultLanguageID,

                IsDefault = false,

                IsEnabled = false,

                ExternalURL = "localhost:55975",

                InternalURL = "Default",

            DefaultSiteAvatarFileName = "Default"
            };

            var partial = RenderRazorViewToString("Properties/_createSite", model);

            return Json(new { Response = AjaxResponse.Success, Message = partial }, JsonRequestBehavior.AllowGet);

        }

加载该内容的javascript：

$("#createSiteModal").delegate("#createSiteButton", "click", function () {

    var $this = $(this),
        id = $("#EnvironmentID").val();
        name = $("#Name").val();

    $.ajax({
        dataType: 'json',
        type: "POST",
        url: '/Settings/CreateSite',
        data: { id: id, name: name },
        success: function (ret) {
            if (ret.Response == RESPONSE.SUCCESS) {
                $.when($("#properties").html(ret.Message)).then(function () {
                    $('.accordion > dd').hide();
                    $("#createSiteModal").modal("hide");                        
                });                 
            }
            if (ret.Response == RESPONSE.ERROR) {
                console.error("Error: There was an unknown error while creating new site!");
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            ajaxErrorHandler(jqXHR);
        }
    });
});

这就是为什么我总是在我的部分视图周围使用容器，并将容器命名为“wrapper- [partialviewname]”。希望这会有所帮助。

快乐的编码。

Answer 3

您通常希望将部分视图包装在容器中并将ID附加到该特定容器，以便将来可以选择它以填充它或通过AJAX刷新它的内容。

添加容器可能不够，因为引导容器是类。你想要做的是指定一个div，它有一个名为container的类和一个Id，例如：login-partial

这使您可以选择部分的父级： - ）

我是否需要为部分视图添加容器？（Bootstrap 3）

3 个答案:

我是否需要为部分视图添加容器？ （Bootstrap 3）

3 个答案:

我是否需要为部分视图添加容器？（Bootstrap 3）