asp.net-mvc - ASP.NET MVC、插件架构和 id 冲突

Question

因此，我一直在向一位即将开始开发新用户界面的 friend 大肆谈论 ASP.NET MVC......

他问我是否可以使用 ASP.NET MVC 解决以下问题:

想象一个支持插件的网络应用程序。在当前的 ASP.NET WebForms 应用程序中，插件开发人员提供了一个用户控件和一些 JQuery。控件的 ID 是唯一的，以便 JQuery 始终能够选择正确的 DOM 元素，以便后面的代码能够处理正确的控件集合。

我建议在 MVC 中，因为我们可以有任意数量的表单...每个插件都可以实现为局部 View 。

每个partialView都将由自己的表单包装，因此相关的 Controller 操作只会接收partialView中定义的表单数据 - 因此从这个角度来看，我们不关心DOM id冲突。

但是，如果确实发生 ID 冲突，HTML 将无效，因此插件开发人员编写的 JQuery 可能会失败!

我不知道我们该如何解决这个问题...

我不喜欢在添加插件时解析partialView是否发生冲突的想法，也不喜欢限制插件开发人员有权访问的id的想法。

也许 id 可以在运行时使用前缀进行扩充，并且可以为模型绑定(bind)器提供此前缀？

Answer 1

您可以将插件的内容包装在 DIV 或 FORM 元素中，并在页面上为其指定唯一的 ID。然后只需使用 jQuery 来仅选择此“父”DIV 或 FORM 元素内的元素。

您可能可以自动生成一个 GUID 以在运行时用作唯一 ID，但这需要编写插件的人员付出一些努力。不过，您可能可以通过某种方式对其进行设计，使其自动生成“父”DIV 和 ID，然后您可以在 View 中将 ID 作为插件的属性进行访问。

只是一些想法，我还没有构建一个像这样的基于 ASP.NET MVC 插件的系统，但它看起来并不太难。

以下是使用自定义 ViewUserControl 基类的 PartialView 示例:

ViewUserControl1.ascx:

<%@ Control Language="C#" Inherits="MvcPluginPartialView.PluginViewUserControl" %>
<input class="txtText" type="text" value="<%=this.ID %>" />
<input class="txtButton" type="button" value="Show Alert" />
<script type="text/javascript">
    jQuery(function() {
        // This is the Unique ID of this Plugin on the Page
        var pluginID = "<%=this.ID %>";

        // Attach the OnClick event of the Button
        $("#" + pluginID + " .txtButton").click(function() {
            // Display the content of the TextBox in an Alert dialog.
            alert($("#" + pluginID + " .txtText").val());
        });
    });
</script>

MvcPluginPartialView.PluginViewUserControl:

namespace MvcPluginPartialView
{
    public class PluginViewUserControl : ViewUserControl
    {
        public PluginViewUserControl()
        {
            this.ID = "p" + Guid.NewGuid().ToString().Replace("-", "");
        }

        public override void RenderView(ViewContext viewContext)
        {
            viewContext.HttpContext.Response.Cache.SetExpires(DateTime.Now);
            ViewUserControlContainerPage containerPage = new ViewUserControlContainerPage(this);
            //this.ID = Guid.NewGuid().ToString();
            RenderViewAndRestoreContentType(containerPage, viewContext);
        }

        internal static void RenderViewAndRestoreContentType(ViewPage containerPage, ViewContext viewContext)
        {
            string contentType = viewContext.HttpContext.Response.ContentType;
            containerPage.RenderView(viewContext);
            viewContext.HttpContext.Response.ContentType = contentType;
        }

        private sealed class ViewUserControlContainerPage : ViewPage
        {
            public ViewUserControlContainerPage(ViewUserControl userControl)
            {
                this.Controls.Add(userControl);
            }

            protected override void Render(System.Web.UI.HtmlTextWriter writer)
            {
                writer.Write("<div id='" + this.Controls[0].ID + "'>");

                base.Render(writer);

                writer.Write("</div>");
            }
        }
    } 
}

然后，要将 View 放置在页面上，您可以像往常一样使用“Html.RenderPartial”方法，此外，您可以根据需要在页面上放置任意数量的 View ，它们都会按预期工作。

<%Html.RenderPartial("ViewUserControl1"); %>
<%Html.RenderPartial("ViewUserControl1"); %>
<%Html.RenderPartial("ViewUserControl1"); %>