View not load after call action controller from jquery script

Question

I have the following problem: After exchanged value of the DropDownList, call the Create action in the controller using the script, the model is updated correctly, but did not show changes in View. Does not display any change in View, it remains unchanged although the model has changed. Please tell me where I'm wrong. Thank You.

Controller:

 public ActionResult Create(int? id)
    {            
        IEnumerable<Instructor> selIns = db.Instructors.Where(x => x.ID == id);

        var model = new CreateDepartmentViewModel
        {
            Department = new Department(),                
            Instructors = selIns,
        };
        return View(model);
    }

View:

@if (Model.Instructors != null)
{
<h3>
    Instructors
</h3>
<table class="table">
    <tr>
        <th>Name</th>
        <th>Grade</th>
    </tr>
    @foreach (var item in Model.Instructors)
    {
        <tr>
            <td>
                @item.FullName
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.HireDate)
            </td>
        </tr>
    }
</table>
}

….
  @Html.DropDownListFor(x => x.Department.InstructorID, Model.InstructorIds, htmlAttributes: new { @id = "intructors", @class = "form-control" })
…..

$(document).ready(function () {
    $("#intructors").change(function () {
       var idselect = $("#intructors").val();
        $.get("/Department/Create", { id: idselect }, function (data) {
        });
    });
});

Your not doing anything with the data returned by the Create() method. What are you expecting? — user3559349
– user3559349, Commented Jul 22, 2015 at 10:41
I have a model property (named Instructors) wich is updated when I exchange DropDownList value, and I want to show those instructors who have selected ID. model in controller is changing right, but not displayed changes in view. — turdeanu
– turdeanu, Commented Jul 22, 2015 at 11:03
@turdeanu, Again - Your are not doing anything with the view you return to the client (and in any case it needs to be a partial view). What do you want to do with it - i.e add it to the DOM inside a existing div element with id="someValue"? — user3559349
– user3559349, Commented Jul 22, 2015 at 11:06
@Stephen Mueke. Thank you for answer. I added all significant code. $.get("/Department/Create", { id: idselect }... call Create action with selected instructor id. In controller model.Instructors is updated, but View not display updated Model.Instructors. — turdeanu
– turdeanu, Commented Jul 22, 2015 at 11:40

user3559349 · Accepted Answer · 2015-07-23 03:06:02Z

Firstly your not doing anything with the view that you return from Create() method. Your script needs to be

$("#intructors").change(function () {
  var idselect = $("#intructors").val();
  $.get("/Department/Create", { id: idselect }, function (data) {
    $(someElement).html(data);
  });
});

Where someElement is a html element where you want to insert the returned html. In addition, your method needs to return a PartialView(model);, not View(model);.

From the comments, your need an additional methods and partial view as follows

Controller

// The main method for additional generating you view
public ActionResult Create(int? id)
{            
  ....
  return View(model);
}

// The method that is called by your ajax call
public ActionResult FetchInstructors(int id)
{
  // note the following line would fail if parameter id is null so it should be int id, not int? id
  IEnumerable<Instructor> model = db.Instructors.Where(x => x.ID == id);     
  return PartialView("_Instructors", model);
}

Create.cshtml

@model CreateDepartmentViewModel
....
<h3>Instructors</h3>
<div id="Instructors">
  @Html.Partial("_Instructors", Model.Instructors)
</div>
.... // your dropdownlist etc.

_Instructors.cshtml (partial view)

@model IEnumerable<Instructor>
<table>
  <thead>
    ....
  </thead>
  <tbody>
    @foreach (var item in Model)
    {
      <tr>
        <td>@item.FullName</td>
        <td>@Html.DisplayFor(m => item.HireDate)</td>
      </tr>
    }
  </tbody>
</table>

Then the script (in Create.cshtml) needs to be

var placeholder = $('#Instructors'); // cache it
var url = '@Url.Action("FetchInstructors", "Department")'; // don't hard code you url's
$("#intructors").change(function () {
  var idselect = $(this).val(); // use $(this) so you don't traverse the DOM again
  $.get(url, { id: idselect }, function (data) {
    placeholder.html(data);
  });
});

Stephen , thanks very much for your help. It is exactly what I wanted to do. Thank you again.

Collectives™ on Stack Overflow

View not load after call action controller from jquery script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related