How to access model properties to create texboxfor in IEnumerable Type?

Question

I want to create strongly typed textbox using Html helper in @model List<Proj.xx.MyClass>. But I am not able to access the properties of MyClass.

can anyone please help me sort out the issues?

  public class MyClass
{

        public string Name { get; set; }

        public string AddNote { get; set; }
}

View

 @model List<Proj.xx.MyClass>
         @foreach (var item in Model)
         {
          <tr>
            <td>
                <a data-toggle="modal" data-target="#AddNote">

                    @Html.DisplayFor(modelItem => item.Name)
              </a>

            </td>                                                                

        </tr>
        }


 <div class="modal fade" id="AddNote" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">                                       
                        @Html.TextBoxFor(m=>m.AddNote)                             

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="reset" data-dismiss="modal">Close</button>
                    <button type="submit" id="submit">Submit</button>              
                </div>
            </div>
        </div>
    </div>

Not clear what you are wanting to do. Are you wanting to edit the `AddNote` for each item in the collection? — , Jul 23 '18 at 03:45
@StephenMuecke, I have updated my question. I want to add modal popup upon click on Name. And in that modal, I want to add textbox. — MVC, Jul 23 '18 at 03:54
Since you want to edit a Note for a single `MyClass`, then you should generate the modals html using `@Html.Action()` to call a server method that returns a partial view (whose model is a new instance of `MyClass`) — , Jul 23 '18 at 03:57
@StephenMuecke, Can you please show me some sample code so that I can follow. I am not able to get what you said. — MVC, Jul 23 '18 at 04:03

score 3 · Accepted Answer · answered Jul 23 '18 at 04:30

3

You can create a ChildActionOnly method that returns a partial view of you modal based on an instance of MyClass

[ChildOnlyAction]
public PartialViewResult _Note()
{
    MyClass model = new MyClass();
    .... // set any defaults if required
    return PartialView("_Note", model));
}

_Note.cshtml partial

@model MyClass
<div class="modal fade" id="AddNote" role="dialog">
    ....
    <div class="modal-body">
        @Html.HiddenFor(m => m.Name)                             
        @Html.TextBoxFor(m => m.AddNote)                             
    </div>
    ....
</div>

And then in the main view, include it using

@Html.Action("_Note") // assumes its in the same controller

or

@{ Html.RenderAction("_Note"); }

Note that I included a hidden input for the Name property assuming you will also want to post back that value as well so that you know which MyClass the Note is associated with (although you really should also have a ID property for that as well). In addition, your html should also include a <form> element to submit the edited value.

Then you will also need some JavaScript to assign the current value to the inputs assuming you are editing existing records.

answered Jul 23 '18 at 04:30

Great help Stephen. – MVC Jul 23 '18 at 07:06
I need one more help which is related to the code which you have shown here. As you have seen the modal pop up where I want to submit the input. Can you please show me the way the grab particular row Id when submitting the modal pop up. – MVC Jul 23 '18 at 11:15
I assume you want to set the value of the hidden input? If so, you could give the link a class name, say ``, then use `$('.showdialog').click(function() { $('#Name').val($(this).text()); })` – Jul 23 '18 at 11:20
One small doubt, I have `@Html.DisplayFor(modelItem => item.Id)` as well in my main view and I want to pass this Id when I submit the modal popup. And I tried `$('#Id').val($(this).text());` but not getting the Id value of that particular row. Please help me to write JQuery function. I got lost here. Please help me. – MVC Jul 23 '18 at 11:32
There is nothing in your question about a `@Html.DisplayFor(modelItem => item.Id)` and without seeing the full code for your view its not possible to guess the correct jQuery selectors. – Jul 23 '18 at 11:37
You should ask a new question with the relevant view code and script you have tried (Its late here and I will be signing off shortly) – Jul 23 '18 at 11:38
Sure Stephen. I will post a new question. If you get a time then please have a look tomorrow. – MVC Jul 23 '18 at 11:39
Can you please have a look on [this](https://stackoverflow.com/questions/51478630/how-to-retrieve-value-from-table-row-and-use-that-value-in-modal-pop-up-submit-c) – MVC Jul 23 '18 at 12:32
Sorry to interrupt you, Stephen. Can you please have a look on my another question. Thank you. – MVC Jul 23 '18 at 22:06
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176598/discussion-between-stephen-muecke-and-mvc). – Jul 23 '18 at 22:15

How to access model properties to create texboxfor in IEnumerable Type?

1 Answers1