在 MVC HTML Helper 中注入 Javascript 代码和 HTML答案

【问题标题】：Inject Javascript Code along With HTML in MVC HTML Helper在 MVC HTML Helper 中注入 Javascript 代码和 HTML
【发布时间】：2017-02-16 10:43:17
【问题描述】：

我想为一个按钮创建一个 HTML 帮助程序，并且我想用该按钮将一些 javascript(jQuery) 代码注入我的页面。我该怎么做？

谢谢

【问题讨论】：

您想使用 HTML Helper 构建脚本标签吗？
@DanNguyen ：我想为DropDownList 创建HTML Helper 并在级联DropDownList 的场景中使用它
也许你想更新你的问题。它说你想用 MVC HTML Helper 创建一个按钮
@Arian 使用敲除并创建客户端视图模型并将其绑定到下拉列表。然后应该能够根据需要执行级联下拉列表。
@Arian 提供所需输出的minimal reproducible example。这样可以提供更好的建议来实现您的要求。

标签： c# asp.net-mvc c#-4.0 model-view-controller html-helper

【解决方案1】：

为什么不在 htmlHelper 中添加脚本？（当然你可以添加脚本作为参数）

public static class MyHtmlHelper
{
    public static MvcHtmlString MyButton(this HtmlHelper helper,string text)
    {
        string script = @"<script> function MyMethod(){ alert('You clicked the button') ;} </script> ";
        StringBuilder html = new StringBuilder();
        html.AppendLine(script);
        html.AppendLine("<input type = 'submit' value = '"+ text + "' onclick='MyMethod()'");
        html.Append("/>");
        return new MvcHtmlString(html.ToString());
    }
}

在你看来

@Html.MyButton("Click Me")

【讨论】：

【解决方案2】：

建议在输入标签中使用 Id 设置按钮的 Id，并在 @scripts 部分添加 JQuery/Javascript 代码。这可以使用 html 或使用这样的帮助器来完成

 <input id="btnClick" type="button" value="Click Me!">

或使用 HtmlHelper：

 public enum ButtonType { button = 0, submit = 1, reset = 2 }

 public static class HtmlHelperExtensions
 {
    public static MvcHtmlString Button(this HtmlHelper helper, ButtonType type, string textValue, string id)
    {
               string buttonTagText = $"<input type=\"{type.ToString()}\" value=\"{textValue}\" id = \"{id}\" />";
               return MvcHtmlString.Create(buttonTagText);
    }
 }

在查看文件中（如果使用扩展名）

 @Html.Button(ButtonType.button, "Click Me!", "btnClick")

然后添加如下脚本：

@section Scripts {
   @Scripts.Render("~Scripts/buttonScript.js")
}

或在部分中添加内联 JS 或引用捆绑的 JS。通过这种方式，JS 逻辑可以与 html 标签分离，有助于获得智能感知支持和易于维护/测试代码。在脚本中的按钮引用可以使用来检索

var myButton = $("#btnClick");

然后此引用可用于所需的脚本逻辑。

另外，请确保将脚本部分添加到 _layout.cshtml 中，如下所示：

 @RenderSection("scripts", required: false)

【讨论】：

我建议使用数据属性（如果适用），与 Id 相比，因为属性可能更可重用。但是，此模式观察到渐进增强，因此这是更好的方法（与内联脚本相反）。

【解决方案3】：

在您的视图页面中添加以下行

 @Html.Button("Click Me!", htmlAttributes:new {Onclick="OnClickfunction"})

然后在脚本部分添加以下内容

 <script type="text/javascript">
   function OnClickfunction()
   {
   //Write Your Code here while click.....
   }
   </script>

【讨论】：