Using PartialView as resusable html code with variable

Question

I'm using MVC 5 and I have a partial view which renders a styled select:

  @model Int16
  <div class="select">
    <span class="arr"></span>
    <select>
        <option>2016</option>
    </select>
  </div>

Notice the model. I'm passing in an int that will change the width of the select. This is how I render the partial view in Index.cshtml and other views:

   @Html.Partial("~/Views/Components/_select.cshtml",(short) 300)

So in this example, I want the select to have a width of 300px. I added the following javascript in my partial view, so now it looks like this:

@model Int16
<script>
    $(function () {
        debugger;
        var width = '@Model';
        if (width !== '') {
            $('div.select select').css(width, width + 'px');
        }
    });
  </script>
 }
<div class="select">
  <span class="arr"></span>
  <select>
    <option>2016</option>
  </select>
</div>

Two problems:

The code isn't working. The javascript isn't being called, so the width of the select is not changing. The debugger statement is not being hit.
I don't like the javascript being inside the partial view. I will have a page with 8 of these selects (hence the reason for the reusable html) but with the javascript being in the partial view, that code will be on the page 8 times. Very inefficient.

First and foremost, how do I get the javascript to fire in a partial view? (I would like this answered because I cant see for the life of me why it isn't firing).

Next,what would be a better place to put the javascript so the width of the selects inside the partial view will be changed?

Thanks

Shad · Accepted Answer · 2016-05-05 19:04:50Z

1

You can try to replace your JavaScript code with CSS. In fact, you just add css property to html element using your code. So, why just not to write a CSS rule?

@model Int16

<style>
    div.select select { width: @(Model.ToString() + "px") }
</style>
<div class="select">
  <span class="arr"></span>
  <select>
    <option>2016</option>
  </select>
</div>

answered May 5, 2016 at 19:04

Shad

4,4643 gold badges38 silver badges40 bronze badges

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

Comments

William Gates · Accepted Answer · 2016-05-05 19:10:42Z

1

In your case I don't think you even need javascript - Make use of Razer directly on the select element instead.

@model Int16
<div class="select">
  <span class="arr"></span>
  <select style="width: @string.Format("{0}px", Model)">
    <option>2016</option>
  </select>
</div>

answered May 5, 2016 at 19:10

William Gates

3113 silver badges11 bronze badges

1 Comment

BoundForGlory Over a year ago

This worked...I used string interpolation: <select style="width: @($"{Model}px")"></select>

Simon-Pierre Belanger · Accepted Answer · 2016-05-05 19:00:50Z

0

Well for one your script end tag is inside your function.

<script>
    $(function () {
        debugger;
        var width = '@Model';
        if (width !== '') {
            $('div.select select').css(width, width + 'px');
        }
    });
 }
</script>

As for having javascript directly in your view, you can get the code in a seperate file and put only a reference src in your partial view. Such as this :

<script type="text/javascript" src="~/exemple.js")"></script>

edited May 5, 2016 at 19:00

answered May 5, 2016 at 18:55

Simon-Pierre Belanger

11 bronze badge

1 Comment

BoundForGlory Over a year ago

Honestly, I have a scripts section in my _layout and when i copied the code, I omitted this. So the script tag is in the correct place.

Collectives™ on Stack Overflow

Using PartialView as resusable html code with variable

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related