Add code in View with jQuery script (ASP.NET MVC)

Question

I have div in my View
<div class="control-group" id="Phone"></div> and I need to add code inside with jQuery script.

I tried this

@section Scripts
{
<script type="text/javascript">
    $("select#Role").change(function () {
        if ($(this).val() == "2") {
            $("div#Phone").html('<span class="control-label">* Phone:</span>
                <div class="controls">
                @Html.TextBoxFor(m => m.PhoneNumber)
                @Html.ValidationMessageFor(m => m.PhoneNumber, null, new { @class = "text-error" })
          </div>');
        } else {

                }
    });
</script>

}

but I got a lot of errors.
What's wrong and how to fix that?

vijay · Accepted Answer · 2013-06-26 10:03:33Z

6

Try below code

@{
var input= Html.TextBoxFor(m => m.PhoneNumber).ToHtmlString();
var message = Html.ValidationMessageFor(m => m.PhoneNumber, null, new { @class = "text-error" }).ToHtmlString();

}

@section Scripts
{
<script type="text/javascript">
    $("select#Role").change(function () {
        if ($(this).val() == "2") {
            $("div#Phone").html('<span class="control-label">* Phone:</span><div class="controls">' + '@input' + '@message' + '</div>');
        } else {

                }
    });
</script>
}

answered Jun 26, 2013 at 10:03

vijay

1,3531 gold badge11 silver badges15 bronze badges

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

Comments

speti43 · Accepted Answer · 2013-06-26 09:56:37Z

0

You are injecting razor code into HTML. Razor code executed on server side, and it will be HTML when the server renders the page and sends to the browser. So razor code cannot run on client side. It's not a valid in HTML. Your javascript can only run client side after page rendering, because it's a client-side script. So injecting razor code by javascript doesn't make sense. What Would you like to do?

answered Jun 26, 2013 at 9:56

speti43

3,0622 gold badges22 silver badges26 bronze badges

Comments

David · Accepted Answer · 2013-06-26 09:57:49Z

0

It looks like you're trying to create a multi-line string in JavaScript. To do so, I believe you need to "escape" the newline character:

'<span class="control-label">* Phone:</span> \
 <div class="controls"> \
     @Html.TextBoxFor(m => m.PhoneNumber) \
     @Html.ValidationMessageFor(m => m.PhoneNumber, null, new { @class = "text-error" }) \
 </div>'

You'll also want to double-check how this server-side code actually renders on the client to make sure it's what you expect and still turns out to be valid JavaScript (since you're rendering it as simply a string in a JavaScript block).

answered Jun 26, 2013 at 9:57

David

221k42 gold badges245 silver badges337 bronze badges

Collectives™ on Stack Overflow

Add code in View with jQuery script (ASP.NET MVC)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related