CODEWITHSUNDEEP
jqueryasp.net-mvc-3
Bijay Thapa
Bijay Thapa

Reputation: 380

jquery in editorfor

I'm trying to use jquery in asp.net mvc3. I'm using EditorTemplates for the list. My model is as

public class staffinfo
{
    public int staffid { get; set; }
    public double extgrade { get; set; }
    public string lvlid { get; set; }
    public IList<SelectListItem> level { get; set; }
    public string grdid { get; set; }
    public IList<SelectListItem> grade { get; set; }
    public double pf { get; set; }       
    public double wages { get; set; }
    public List<hrfacility> facility { get; set; }

}

public class hrfacility
{
    public int id { get; set; }
    public string name { get; set; }
    public double price { get; set; }        
    public int staffid { get; set; }
    public string staffname { get; set; }               
    public double amount { get; set; }
    public bool selected { get; set; }
}

View:

...
@Html.EditorFor(m => m.wages)    
@Html.EditorFor(m=>m.facility)

EditorTemplate for hrfacility

@model Mysol.Models.hrfacility
...
@Html.DisplayFor(m=>m.name)
@Html.CheckBoxFor(m=>m.selected)    
@Html.EditorFor(m => m.staffname)
@Html.EditorFor(m => m.amount)

 <script type="text/javascript">
    $('#staffname').attr('readonly', true);
</script>

I've used the above procedure without the list part in editortemplates and the jquery works fine but for this particular situation it is not working!!

Is it because there might be more than one staffname??

How can i make jquery work for the above situation (make staffname readonly)??

P.S. readonly is just for the example purpose. I need to do other things as well with jquery like assigning the value to the textbox. If i can get this work, i think i can do other things as well.

Thanks

Upvotes: 1

Views: 2203

Answers (2)

jim tollan
jim tollan

Reputation: 22485

Bj,

I think your best bet might be to work on a class, rather than an Id, given that you have multiples. You could try:

@Html.TextBoxFor(m => m.staffname, new { @class = "staffname" })

....    

<script type="text/javascript">
    $(function () {
        $('.staffname').attr('readonly', true);
    });
</script>

(notice you can't use EditorFor as this wont accept htmlAttributes, you must use the base inputtype, but that wont matter as you 'know' you want to display it in a readonly textbox)

[Edit] - of course, if using the textbox, there's no need at all to use a class, you can of course just add the style 'inline' to achieve the same result: 

@Html.TextBoxFor(m => m.staffname, new { @readonly = "true" })

OR (browser quirks):

@Html.TextBoxFor(m => m.staffname, new { @readonly = "readonly" })

N.B

one further thing to add, there's a remote chance (depending on your javascript loading) that the EditorFor template is actually being called BEFORE the jquery library is being loaded. Check that this is not the case by looking at the generated source. Prolly not an issue but one that has caught me out before with editorfor templates and partials.

Upvotes: 1

Mohayemin
Mohayemin

Reputation: 3870

It does not work because the id of the input for staffname should be something like facility_0_staffname , facility_1_staffname and so on.

You better add a class to the staffname input and access it with that class.

You may check the id with Firebug (on Firefox)

Upvotes: 2

Related Questions