Inject Javascript Code along With HTML in MVC HTML Helper

Question

I want to create a HTML Helper For a button and I want to inject some javascript(jQuery) code with that button to my page. How I can do this?

Thanks

@DanNguyen : I want to create HTML Helper for DropDownList and use it in scenario with cascade DropDownList — DooDoo
– DooDoo, Commented Feb 18, 2017 at 13:59
maybe you want to update your question. it said that you want yo create a button using MVC HTML Helper — Dan Nguyen
– Dan Nguyen, Commented Feb 18, 2017 at 14:02
@Arian use knockout and create a client side view model and bind it to the drop down lists. Should then be able to preform cascading drop down list as desired. — Nkosi
– Nkosi, Commented Feb 20, 2017 at 14:28
@Arian provide a minimal reproducible example of the desired output. this would allow for better suggestions to achieve what you require. — Nkosi
– Nkosi, Commented Feb 20, 2017 at 14:36

George Vovos · Accepted Answer · 2017-02-18 13:00:19Z

6

+400

Why don't you add a script in your htmlHelper? (of course you can add the scripts as parameters)

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());
    }
}

and in your view

@Html.MyButton("Click Me")

answered Feb 18, 2017 at 13:00

George Vovos

7,6282 gold badges27 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chirag Rupani · Accepted Answer · 2017-02-18 13:55:14Z

2

Suggestion is to set Id of button using Id in input tag and add JQuery/Javascript code in @scripts section. This can be done with html or using helper like this

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

or using 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);
    }
 }

In View file (in case extension is used)

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

Then add script as below:

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

or add inline JS within section or refer bundled JS. In this way, JS logic can be separated from html tag, would help in getting intellisense support and easy to maintain/test code. Within Script button reference can be retrieved using

var myButton = $("#btnClick");

Then this reference can be used for desired script logic.

Also, ensure the script section is added in _layout.cshtml as below:

 @RenderSection("scripts", required: false)

answered Feb 18, 2017 at 13:55

Chirag Rupani

1,7152 gold badges18 silver badges37 bronze badges

1 Comment

James Haug Over a year ago

I would suggest using a data attribute, if applicable, compared to an Id, as an attribute could be more re-usable. However, this pattern observes progressive enhancement, so this is the better way to go (as opposed to inlining the script).

stephen · Accepted Answer · 2017-02-20 07:25:26Z

-1

Add the below line in your view page

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

then add the following in your script section

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

answered Feb 20, 2017 at 7:25

stephen

113 bronze badges

Collectives™ on Stack Overflow

Inject Javascript Code along With HTML in MVC HTML Helper

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related