Asp.Net MVC Razor markup for jQuery Mobile controls

Question

This is an asp.net MVC mobile app - I have a From textbox, and a Nights text box - the standard view is:

    <li data-role="fieldcontain">
        @Html.LabelFor(m => m.From)
        @Html.TextBoxFor(m => m.From)     
        @Html.ValidationMessageFor(m => m.From)    
    </li>

    <li data-role="fieldcontain">
        @Html.LabelFor(m => m.Nights)
        @Html.TextBoxFor(m => m.Nights)            
        @Html.ValidationMessageFor(m => m.Nights)    
   </li>

What would I change the Razor markup above to add in data-options and data-role:

ie.

@Html.TextBoxFor(m => m.From)

to

<input name="From" type="date" data-options='{"mode":"datebox"}' data-role="datebox" id="From" />

and

@Html.TextBoxFor(m => m.Nights)

to

<input type="range" name="nights" id="nights" value="1" min="0" max="28" />

(these are a date plugin - and the slider control in Mobile)

EDIT: I've got the second part:

@Html.TextBoxFor(m => m.Nights, new { @type = "range", min = 1, max = 60 })

Mark · Accepted Answer · 2012-08-02 14:27:35Z

4

Sorry for bothering everyone - I was knocking my heda against the wall, and then tried \ to get a quote inside a quote:

@Html.TextBoxFor(m => m.From, new { @type = "date", data_role = "datebox", data_options = "{\"mode\":\"datebox\"}"})

The replacement for my original Razor markup is:

    <li data-role="fieldcontain">
        @Html.LabelFor(m => m.From)
        @Html.TextBoxFor(m => m.From, new { @type = "date", data_role = "datebox", data_options = "{\"mode\":\"datebox\"}"})    
        @Html.ValidationMessageFor(m => m.From)    
    </li>

    <li data-role="fieldcontain">
        @Html.LabelFor(m => m.Nights)
        @Html.TextBoxFor(m => m.Nights, new { @type = "range", min = 1, max = 60 })            
        @Html.ValidationMessageFor(m => m.Nights)    
   </li>

Hope this is useful to others like me!!

Mark

answered Aug 2, 2012 at 14:27

Mark

7,88826 gold badges94 silver badges148 bronze badges

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

Collectives™ on Stack Overflow

Asp.Net MVC Razor markup for jQuery Mobile controls

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related