具有 Html 属性的 MVC 5 部分视图答案

【问题标题】：MVC 5 Partial view with Html attributes具有 Html 属性的 MVC 5 部分视图
【发布时间】：2018-05-31 09:18:02
【问题描述】：

我在 MVC 5 中的视图中有部分视图。这个部分视图在主视图的不同部分呈现 Markdown 编辑器。这是部分视图中的 Markdown 编辑器代码。

<div id="field comments">
</div>    
var editor = new tui.Editor({
el: document.querySelector('#field comments')})

我在主视图中将此部分称为

@Html.Partial("_MarkdownEditor")

但问题是我想通过将不同的参数传递给“id”属性来在不同的部分使用这个局部视图。有些像这样，

@Html.Partial("_MarkdownEditor", new { @id = "executive comments" })

因此这将创建一个新的 Markdown 编辑器实例，其 id = "executive cmets" 和 querySelector(#executive cmets)。

<div id="executive comments">
</div>    
var editor = new tui.Editor({
el: document.querySelector('#executive comments')})

动态地，我需要通过在部分视图中传递参数来设置“id”属性和 querySelector 属性。我是 MVC 的新手..！请指教..

【问题讨论】：

使用接受additionalViewData 的Html.Partial() 的重载之一 - 然后参考this answer
StephenMuecke 这不起作用。 @Html.Partial("_MarkdownEditor", new { htmlAttributes = new { @id = "editorsection" } })"
当然可以。在部分中，您可以使用@{ var attributes = ViewData["htmlAttributes"]; }（并且它需要是@Html.Partial("_MarkdownEditor", null, new { htmlAttributes = new { @id = "editorsection" } })）
@StephenMuecke 我误解了这个问题！我现在已经更新了这个问题..你能建议一下吗。
动态设置是什么意思？您在主视图中使用@Html.Partial("_MarkdownEditor", new { id = "executivesummary" }) 等在主视图中对id 进行硬编码，因此对于每个人，您都需要一个与el: document.querySelector('#executivesummary'), 匹配的脚本（其他人也是如此）。甚至不清楚您为什么需要如果这就是它所包含的全部内容，则为部分 - 您不妨在主视图中添加 <div> 元素。

标签： html asp.net-mvc asp.net-mvc-partialview

【解决方案1】：

如果我不记得错了，我相信你可以这样做：

viewmodel 主页

public class mainviewmodel
{

    public partialViewModel {get;set}
}

视图模型部分

public class partialviewmodel
    {

        public id {get;set}
public classval {get;set;}


    }

然后在主页中调用部分并给它部分视图模型

像这样：

@Html.RenderPartial("partialpage", Model.partialviewmodel);

然后在部分页面中，您可以在需要的地方添加视图模型中的 html 属性。

【讨论】：

我误解了这个问题！我现在已经更新了这个问题..你能指点一下吗！

【解决方案2】：

您需要根据参数动态渲染局部视图。在这种情况下，首先您需要在控制器中编写一个操作方法来返回部分视图

 public IActionResult MarkdownEditorView(string keyId)
    {            
        return PartialView(MarkdownEditor, new { id= keyId });
    }

然后在 javascript/jquery 函数中你可以动态渲染它

  //div container
  var container = $("#editSection");
  $.get("/controllerName/MarkdownEditorView/",
        {
            keyId: "editSection"
        },
        function (data) {
            indicatorContainer.html(data);
        }
      );

【讨论】：

我误解了这个问题！我现在已经更新了这个问题..请你指教！ @Diptee
此解决方案适用于您的问题。您需要创建一个将返回您的局部视图的操作方法。您还需要更新部分视图代码，因为它应该采用 id 参数。这需要通过 viewmodel 传递给局部视图 cshtml。

【解决方案3】：

您可以将匿名对象作为模型传递给部分：

@Html.Partial("_MarkdownEditor", new { id = "executive-comments" })

或者使用ViewBag/ViewData:

@{
    ViewBag.MarkDownEditorSectionId = "executive-comments"
}
@Html.Partial("_MarkdownEditor")

并在部分内部使用它。像这样的：

<div id="@Model.id">
</div>    
var editor = new tui.Editor({
el: document.querySelector('#@Model.id')})

【讨论】：

我误解了这个问题！我现在已经更新了这个问题..你能建议一下吗。