CODEWITHSUNDEEP
javascriptjqueryasp.net-mvctwitter-bootstrap
Calidus
Calidus

Reputation: 1404

Adding JavaScript to MVC 4 .NET Bootstrap Web App

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>

Upvotes: 0

Views: 211

Answers (2)

bilal.haider
bilal.haider

Reputation: 318

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..

Upvotes: 2

milagvoniduak
milagvoniduak

Reputation: 3254

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>

Upvotes: 1

Related Questions