Adding JavaScript to MVC 4 .NET Bootstrap Web App

Question

So I built this nice MVC 4 web app, I initially stayed away from fancy CSS and JS and just focused on getting it to work. I got to work, then I decide lets add bootstrap too it make it look pretty. Now I would like to add some basic java script. Some stuff like:

<button class="btn btn-default" type="button" onclick="javascript:document.getElementById('elementid').value=0;">Remove</button>

I have a List of parts, a part as a quantity, a number and name. So I loop through the list.

 @foreach (Hardware hw in Model.HardwareList)
 {
            <div class="row">
                <div class="col-lg-2">
                    @Html.EditorFor(h => hw.Quantity, "Int32")
                </div>
                <div class="col-lg-2">
                    @Html.DisplayFor(h => hw.Partnumber)
                </div>
                 <div class="col-lg-8">
                    @Html.DisplayFor(h => hw.PartName)
                </div>
            </div>
}

My custom editor, is textbox with some bootstrap css to make look pretty. This generates nice simple view but all of my text boxes have a nameof "hw.Quantity" and id of "hw_Quantity". So I can't use getElementById(), if I change the id the textboxes when I go to post the model, I get null list. I feel like I must be missing something super simple.

editor template

 @model int?

@{
    int i;
    if (!Model.HasValue)
    {
        i = 0;
    }
    else
    {
        i = Model.Value;
    }

    var htmlAttributes = new RouteValueDictionary();
    if (ViewBag.@class != null)
    {
        htmlAttributes.Add("class", "form-control " + ViewBag.@class);
    }
    else
    {
        htmlAttributes.Add("class", "form-control");
    }

    if (ViewBag.placeholder != null)
    {
        htmlAttributes.Add("placeholder", ViewBag.placeholder);
    }


}

<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error")) input-group">
    @Html.TextBox(
        "",
        ViewData.TemplateInfo.FormattedModelValue,
        htmlAttributes)
    @Html.ValidationMessageFor(m => m, null, new { @class = "help-block" })

</div>

It only works for the first textbox with an id of 'hw_Quantity'. I want to create a button for each textbox, but when i do they don't work because I don't have an unique ID to use. — Calidus
– Calidus, Commented Apr 18, 2014 at 20:49
My answer below solves this particular problem, however I'm still wondering how do you use the values when its posted to the server — bilal.haider
– bilal.haider, Commented Apr 18, 2014 at 20:59

bilal.haider · Accepted Answer · 2014-04-18 20:55:18Z

2

I'm assuming you have the remove button for every row, on click of that button you can execute a javascript function that can look into the clicked button's parent ".row" and change the "hw.Quantity" value in that row. Like

onclick="javascript:$(this).parents('.row').find('elementid').val(0);"

Additionally you can use Html's data- attributes to store additional data..

edited Apr 18, 2014 at 20:55

answered Apr 18, 2014 at 20:49

bilal.haider

3181 gold badge4 silver badges18 bronze badges

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

Comments

milagvoniduak · Accepted Answer · 2014-04-18 20:51:53Z

1

For each row add unique "data-" attribute , maybe row id. I am sure you have to have an Id per a row.

htmlAttributes('data-id', {rowid})

You will have to pass this rowId to your custom editor.

Than If you have a remove or clear button per row you can add simple javascript on it

<button class="btn btn-default" type="button" onclick="$('[data-id=@rowId]').val(0)">Remove</button>

answered Apr 18, 2014 at 20:51

milagvoniduak

3,2541 gold badge20 silver badges18 bronze badges

1 Comment

Calidus Over a year ago

@Html.EditorFor(model => model.Quantity, "Int32", new { id = @Model.Partnumber }) Then i dataid = viewbag.id and it works wonderfully.

Collectives™ on Stack Overflow

Adding JavaScript to MVC 4 .NET Bootstrap Web App

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related