使用 MVC Razor 页面将 html 元素添加到页面

Question

On the html for my page I have a <script id="pagedata"></script> element which I would like to add an element to only if a certain partial is rendered. In my layout.cshtml I have the following:

@if (Brand != null)
{
    @Html.Partial("_UseApp");
}

And in my _UseApp.cshtml:

@{

    var iosAppUrl = // retrieve iosLink from our CRM database
    var androidUrl = // retrieve android link from our CRM database 

    // Here I want to add the above variables to the <script id=pagedata> in the html page. Something 
    like this: 

    PageData.AddPageData("appstore", iosAppUrl);
    PageData.AddPageData("playstore", androidUrl);

I cannot work out how to do this - I set breakpoints in the UseApp.cshtml file and the file is being called, but I don't know how to add these script elements. I don't want to just add them into the layout file because I want to keep the app logic separate. Can anyone help? Thanks

Answer 1

My approach to this would be to use jQuery, as reading HTML elements in C# is rather difficult.

In the script below, it checks if the HTML exists, and if it does, we will assign an attribute to it. The second argument in attr() will be your link, note that you can use C# to get the value from your Db, by using the model or ViewBag.

@section Scripts{
    <script>
        $(document).ready(function () { // on ready
            if ($("#replaceWithYourId").length) { // check if ID exists
                $("#pagedata").attr("data-playstore", "link") // use jQuery attr method.
            }
        });
    </script>
}