Dynamically creating a IMG tag Format

I need to create dynamically  image tag in a Razor Page. I'm having problem creating that. I 'm not getting the right format.  When i inspect the element
The tag looks like this

<img class="" alt="" src="http://localhost:53339/images/ticket.PNG?mw=100"
 srcset="http://localhost:53339/images/ticket.PNG?mw=500500w,
 http://localhost:53339/images/ticket.PNG?mw=600600w,
 http://localhost:53339/images/ticket.PNG?mw=700700w," 
 sizes="(min-width:300px)100px,(min-width:400px)200px," 100vw="">

Open in new window


The tag should look like this

src="http://localhost:53339/images/ticket.PNG?mw=320" 
srcset=
"http://localhost:53339/images/ticket.PNG?mw=600 600w,	
http://localhost:53339/images/ticket.PNG?mw=200 800w,	
http://localhost:53339/images/ticket.PNG?mw=600 1600w"
sizes="(min-width: 320px)  280px,
            (min-width: 480px)  440px, 100vw"

Open in new window


There should be space between 600600w  should look like this 600 600w
There should be space between (min-width:300px)100px  should look like this sizes="(min-width: 320px)  (space here)280px

This 100vw="" should be like 100vw"

 Here is sample code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCTEST.Controllers
{
    public class DefaultController : Controller
    {
        // GET: Default

        public ActionResult Index()
        {
            int[] intArrayInput = {100, 200};
            int[] intArrayInput2 = {300,400};

            int[] imageBrowserSizes = { 500, 600, 700 };

            var listC = intArrayInput.Zip(intArrayInput2, (x, y) => new { x, y }).ToList();
            var dictionary = new Dictionary<int, int>();

            foreach (var item in listC)
            {
                dictionary.Add(item.x, item.y);

            }

             var user = new user();
            user.Defaultsize = 100;
            user.Url = "http://localhost:53339/images/ticket.PNG";
            user.ImageBrowserSizes = imageBrowserSizes;
            user.Dictionary = dictionary;


            return View(user);
        }
    }

    public class user
    {
        public string Url { get; set; }
        public Int32 Defaultsize { get; set; }
        public Int32[] ImageBrowserSizes { get; set; }
        public Int32 MinimumWidth { get; set; }
        public Int32 ImageWidth { get; set; }
        public Dictionary<int, int> Dictionary { get; set; }
    }
}

Open in new window


@Model
@{
    string w = "w";

    string parameter = "?mw=";
    string paratwo = "w";
    string space = "&nbsp;";
    string minwidth = "(min-width:";
    string closing = "px)";
    string px = "px";
    string fixedValue = "100vw";
    string comma = ",";
    string strSpacer = " ";

}

<img class="" alt="" src="@Model.Url?mw=@Model.Defaultsize"
     srcset=@foreach (var item in Model.ImageBrowserSizes)
{
  
        @Model.Url@parameter@item @item@paratwo@comma

    var test = string.Format(Model.Url, parameter, item, item, paratwo, comma);
    @test


    @*var test = string.Join(Model.Url, parameter, item, ", ", item, paratwo, comma);
    @test*@


}
     sizes=@foreach (var item in Model.Dictionary)
     {
        @minwidth @item.Value@closing
        @item.Key@px @comma
     }
     @fixedValue />
<h1>dsdsd</h1>

Open in new window

LVL 1
soorrajAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I am not a .NET expert and with that said, it looks like you are missing your strSpacer in the string.Format or string.Join
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
soorrajAuthor Commented:
Here is the answer

@Model
@{
    string w = "w";

    string parameter = "?mw=";
    string paratwo = "w";
    string space = "&nbsp;";
    string minwidth = "(min-width:";
    string closing = "px)";
    string px = "px";
    string fixedValue = "100vw";
    string comma = ",";
    string strSpacer = " ";

}


@{
    <text>
        <img class="" alt="" src="@Model.Url?mw=@Model.Defaultsize"
             srcset="
    @foreach (var item in Model.ImageBrowserSizes)
    {
        HtmlString test = new HtmlString(string.Format("{0}{1}{2} {3}{4},", Model.Url, @parameter, @item, @item, @paratwo));

        @Html.Raw(test)
    }
    "sizes="@foreach (var item in Model.Dictionary)
            {

                HtmlString test1 = new HtmlString(string.Format("{0}{1}{2} {3}{4},", @minwidth, @item.Value, @closing, @item.Key, @px));
                @Html.Raw(test1)
            }
             @fixedValue" />
    </text>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET MVC

From novice to tech pro — start learning today.