Fahad Fahad - 11 days ago 4
Ajax Question

Insert and list data in onew View

What I am trying to do is to have one page to create new House and also diplsay all existing houses.
the code for the main view is :

@modelData.Models.SGHouse

@{
ViewBag.Title = "";
}

<h2>Create</h2>


@using (Ajax.BeginForm(new AjaxOptions
{
HttpMethod = "Post",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "HouseList"
}))
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>SGHouse</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@*<div class="form-group">
@Html.LabelFor(model => model._id, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model._id, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model._id, "", new { @class = "text-danger" })
</div>
</div>*@

<div class="form-group">
@Html.LabelFor(model => model.House, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.House, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.House, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
@Html.Partial("_Houses",Model)


The code for my Partial view to list all houses is :

@model IEnumerable<Data.Models.SGHouse>
<div id="HouseList">

<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.House)
</th>
<th></th>
</tr>

@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.House)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item._id }) |
@Html.ActionLink("Details", "Details", new { id = item._id }) |
@Html.ActionLink("Delete", "Delete", new { id = item._id })
</td>
</tr>
}

</table>
</div>


I am not sure what view to return from my controller, if I do :

public ActionResult Create()
{
return View();
}


I get error from my partial view about model is null.
If I use :

public ActionResult Create()
{
return View(new SGHouse());
}


Then I get error

The model item passed into the dictionary is of type 'Data.Models.SGHouse', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[Data.Models.SGHouse]'.

Any help how to resolve this.

Thanks

Answer

Create one new Property in class like this

 public  class SGHouse
    {

        public List<SGHouse> ListSGHouse { get; set; }
    }

And in Constroller

public ActionResult Create()
    {
        SGHouse model = new SGHouse();
        List<SGHouse> LstSGHouse = new List<SGHouse>();
        LstSGHouse = //Just add list of SGHouse to this property
        model.ListSGHouse = LstSGHouse; //Assign above to this


        return View(model);
    }

In View Just Call like this

@Html.RenderPartial("_Houses", Model.ListSGHouse); 

Make Sure to Check model is not null in your partial view

@if (Model != null)
{

}
Comments