MVC 5 Partial view with Html attributes

Question

I have partial view inside a View in MVC 5.This partial view renders a Markdown editor in different section of the main view. Here is the Markdown Editor code in Partial view.

<div id="field comments">
</div>    
var editor = new tui.Editor({
el: document.querySelector('#field comments')})

I am calling this Partial in Main view as

@Html.Partial("_MarkdownEditor")

But the problem is i want to use this Partial view in different section by passing different parameters to the "id" attribute.Some what like this,

@Html.Partial("_MarkdownEditor", new { @id = "executive comments" })

So this would create a new instance of Markdown editor with id = "executive comments" and querySelector(#executive comments).

<div id="executive comments">
</div>    
var editor = new tui.Editor({
el: document.querySelector('#executive comments')})

Dynamically i need to set both 'id' attribute as well as querySelector attribute by passing the parameter in the Partial view. I am new to MVC..! Please advice..

Use one of the overloads of `Html.Partial()` that accepts `additionalViewData` - then refer [this answer](https://stackoverflow.com/questions/27341031/adding-class-to-editorfor-in-mvc/27341257#27341257) — , May 31 '18 at 09:22
StephenMuecke This doesn't work. @Html.Partial("_MarkdownEditor", new { htmlAttributes = new { @id = "editorsection" } })" — Karthik Selvam, May 31 '18 at 10:13
Of course it does. In the partial, you can then use `@{ var attributes = ViewData["htmlAttributes"]; }` (and it needs to be `@Html.Partial("_MarkdownEditor", null, new { htmlAttributes = new { @id = "editorsection" } })`) — , May 31 '18 at 10:17
@StephenMuecke I had misinterpreted the question ! I have updated the question now.. could you please advice. — Karthik Selvam, May 31 '18 at 10:54
Just as per my previous advice - `@Html.Partial("_MarkdownEditor", null, new { id = "executive comments" } })` and in the partial you would use `
` — , May 31 '18 at 10:58
@StephenMuecke I have tried both `@Html.Partial("_MarkdownEditor", null, new { htmlAttributes = new { @id = "editorsection" } })` and ` @Html.Partial("_MarkdownEditor", null, new { id = "editorsection" })` i getting following error..Cannot convert from to 'System.web.mvc.viewDataDictionary' with the null in the parameter there is no error but it doesn't set the
id. Moreover will this method set the Id in query selector too? — Karthik Selvam, May 31 '18 at 11:24
Oops, That should have been `@Html.Partial("_MarkdownEditor", new ViewDataDictionary { { "id", "editorsection" } })` — , May 31 '18 at 11:49
@StephenMuecke Yes it works! We can even do it this way.. ` @*@Html.Partial("_MarkdownEditor", new { id = "editorsection" })*@` and `
` But my problem is isn't solved yet ! I still need to set Queryselectory parameter dynamically acoording to 'id' how can this be done? — Karthik Selvam, May 31 '18 at 12:05
That is irrelevant because scripts should never be in partials - only in the main view or its layout — , May 31 '18 at 12:09
@StephenMuecke Yep understood ! Is there any other way? to achieve this? — Karthik Selvam, May 31 '18 at 12:18
@StephenMuecke I did something like this `` I put the Markdown editor code into MarkdownEditor.js file and referenced this script in main view. But i am confused about this what should i set the value of id in query selectory. In my main view i have 18 different comment section. So i need 18 instance's of this editor with different id. Pretty confused about this. — Karthik Selvam, May 31 '18 at 12:28
Just use a class name rather than individual `id` attributes — , May 31 '18 at 12:30
@StephenMuecke These data entered in editor has to captured and database according to the individual fields , So i need to have individual 'id'. — Karthik Selvam, May 31 '18 at 12:39
Then you need 18 individual `id` attributes (and 18 scripts) — , May 31 '18 at 12:42
Yep ! I am fine with 18 individual id attributes but i don't want to have 18 scripts. I need to set them dynamically. — Karthik Selvam, May 31 '18 at 12:54
What do you mean set then dynamically? You are hard coding the `id` in the main view using `@Html.Partial("_MarkdownEditor", new { id = "executivesummary" }) ` etc in the main view so for each one you need a matching script with `el: document.querySelector('#executivesummary'),` (and ditto for the others) .And its not even clear why you need a partial if that is all it contains - you might as well add the `
` elements in the main view. — , May 31 '18 at 12:58
But I do not understand why you do not just give the `
` elements a class name instead of an `id` and just use `$('.yourClassName').tuiEditor({ ... });` to initialize all of them with one script — , May 31 '18 at 13:01
@StephenMuecke I got that ! Thank you Stephen again! I just did this..el: document.querySelector('#@ViewData.Eval("id")'), — Karthik Selvam, May 31 '18 at 13:28

score 0 · Answer 1 · answered May 31 '18 at 09:26

If I do not remember wrong I do believe you can do something like this:

viewmodel main page

public class mainviewmodel
{

    public partialViewModel {get;set}
}

viewmodel partial

public class partialviewmodel
    {

        public id {get;set}
public classval {get;set;}


    }

and then in the main page call the partial and giving it the partialviewmodel

like this:

@Html.RenderPartial("partialpage", Model.partialviewmodel);

Then inside the partial page you can add the html attributes from the viewmodel where you need to.

I had misinterpreted the question ! I have updated the question now.. could you please advice! — Karthik Selvam, May 31 '18 at 10:55

TKharaishvili · Answer 2 · 2018-05-31T21:07:54.667

0

You can either pass the anonymous object as a model to the partial:

@Html.Partial("_MarkdownEditor", new { id = "executive-comments" })

Or use ViewBag/ViewData:

@{
    ViewBag.MarkDownEditorSectionId = "executive-comments"
}
@Html.Partial("_MarkdownEditor")

And use it inside the partial. Something like this:

<div id="@Model.id">
</div>    
var editor = new tui.Editor({
el: document.querySelector('#@Model.id')})

edited May 31 '18 at 21:07

answered May 31 '18 at 09:27

TKharaishvili

1,997
1
19
30

I had misinterpreted the question ! I have updated the question now.. could you please advice. – Karthik Selvam May 31 '18 at 10:54

score 0 · Answer 3 · answered May 31 '18 at 09:41

0

You need to render your partial view dynamically, based on parameter. In that case first you need to write a action method in your controller to return the partial view

 public IActionResult MarkdownEditorView(string keyId)
    {            
        return PartialView(MarkdownEditor, new { id= keyId });
    }

Then in javascript/jquery function you can render that dynamically

  //div container
  var container = $("#editSection");
  $.get("/controllerName/MarkdownEditorView/",
        {
            keyId: "editSection"
        },
        function (data) {
            indicatorContainer.html(data);
        }
      );

answered May 31 '18 at 09:41

Diptee Hamdapurkar

372
2
9

I had misinterpreted the question ! I have updated the question now.. could you please advice! @Diptee – Karthik Selvam May 31 '18 at 10:55
This solution will work for your question. you need to create a action method which will return your partial view. You need to update your partial view code as well, where as it should take id parameter. This you need to pass to your partial view cshtml through viewmodel. – Diptee Hamdapurkar May 31 '18 at 13:10

MVC 5 Partial view with Html attributes

3 Answers3