Вставить код Javascript вместе с HTML в MVC HTML Helper

Question

Я хочу создать HTML-помощник Для кнопки, и я хочу добавить код javascript (jQuery) этой кнопкой на мою страницу. Как я могу это сделать?

Благодаря

Answer 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") 

Answer 2

Предложение является установка Id кнопки с помощью Id в ввода тега и добавьте 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-тега, помогла бы получить поддержку intellisense и легко поддерживать/тестировать код. В справочнике кнопки Script можно получить с помощью

var myButton = $("#btnClick"); 

Тогда эта ссылка может быть использована для требуемой логики скрипта.

Кроме того, убедитесь, что скрипт раздела добавляется в _layout.cshtml, как показано ниже:

@RenderSection("scripts", required: false) 

Answer 3

Добавьте строку ниже на странице просмотра

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

затем добавьте следующее в вашем разделе сценария

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