Is there a way to concatenate strings in html attributes?

Question

I'm using MVC3 and I wanted to use a partial view to create dynamic DOM elements. This is my current partial view:

@model MVCApp.ViewModels.TitlesViewModel

<div class="display-label">Name</div>
<div id="label"+"@Model.Id" class="display-field">@Model.InitValue</div>

Model.Id is 1 but in the HTML in the browser, I currently get:

id="label"+"1"

So if I try and do something like:

alert($("#label1").text())

There's an alert box with nothing in it.

So how can I add the two strings together to form one coherent string that is recognized by jQuery (or document.getElementByID(str) for that matter).

Mrchief · Accepted Answer · 2011-07-12 21:12:39Z

68

Try this (verified):

<div id="@("label"+Model.Id)" class="display-field">@Model.InitValue</div>

edited Jul 12, 2011 at 21:12

answered Jul 12, 2011 at 21:05

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

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

3 Comments

user558594 Over a year ago

This worked: <div id="@("label"+Model.Id)" class="display-field">@Model.InitValue</div> Thanks a lot.

Mrchief Over a year ago

Added quotes just now (while you're posting your comment) :)

user558594 Over a year ago

Yeah, I saw. Thanks for the help, though. I'm still new to MVC3 and Razor syntax.

Steve Morgan · Accepted Answer · 2011-07-12 21:16:04Z

4

You want:

<div id="[email protected]" ...

Razor will recognise the @ as the start of code, execute it and render the results in place in the attribute.

Edit:

This didn't work well as a comment, but here's a line from one of my Razor controls:

<input type="text" readonly="readonly" 
       class="display-field [email protected]" 
       id="@((ViewData["id"] == null) ? 
         ViewData.ModelMetadata.PropertyName : ViewData["id"])"
       value="@Proj.GetJobStatusValue(Model)" />

Try adding a hyphen (-) before the @. It's quite possible that Razor thinks it's an e-mail address and leaving it alone!

edited Jul 12, 2011 at 21:16

answered Jul 12, 2011 at 21:05

Steve Morgan

13.1k2 gold badges44 silver badges49 bronze badges

1 Comment

user558594 Over a year ago

I tried that. In the HTML source in my browser, the id is simply "[email protected]"

craigvl · Accepted Answer · 2014-02-10 23:26:07Z

2

Just adding another option as this is what worked for me when trying to concat string and model value as id in an @html.ActionLink and also for the text value. I needed to use string.Concat. Don't know if this is bad from a performance point of view.

  @Html.ActionLink(string.Concat("View all (", @Model.FooCount, ")"),
        //actionName        
        "SeeAllFoos",
        //ControllerName
        "Foo",
        // routeValues
        new { FooId = @Model.Foo.id },
        //htmlAttributes
        new { @class = "btn btn-success", onclick = "ShowProgress();",
        id = string.Concat("Foo",@Model.Foo.id.ToString()) })

answered Feb 10, 2014 at 23:26

craigvl

3802 silver badges9 bronze badges

Comments

anil shrestha · Accepted Answer · 2020-06-04 04:52:31Z

1

Here is what you need to do.

id="[email protected]"

Underscore(_) is required.For me passing id without Underscore made an issue. Happy conding.

edited Jun 4, 2020 at 4:52

answered Jun 2, 2020 at 9:07

anil shrestha

3,6004 gold badges17 silver badges31 bronze badges

Comments

Joeram · Accepted Answer · 2022-08-18 04:17:59Z

0

id="@("label")@Model.Id"

Adding underscore(_) id="[email protected]" or hyphen (-) id="[email protected]" to separate could also help. Have a great day!

edited Aug 18, 2022 at 4:17

answered Aug 18, 2022 at 4:13

Joeram

13 bronze badges

1 Comment

Yunnosch Over a year ago

Welcome to Stack Overflow! While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

Collectives™ on Stack Overflow

Is there a way to concatenate strings in html attributes?

5 Answers 5

3 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related