locked
populate razor model from json result RRS feed

  • Question

  • User-1787558873 posted

    hi, i would like to populate  razor model from json result

    if  i add a new person, i would like to display it on my view

    im able to add a person in collection but the new person is not displayed.

    how to resolve it ?

      public class HomeController : Controller
        {
            public ActionResult Index()
            {
                var model = new PersonModel();
                model.PersonItems = PersonData.listPerson;
                return View(model);
            }
    
            [HttpPost]
            public ActionResult Create(Person PersonModel)
            {
                try
                {
                    PersonData.listPerson.Add(new Person
                    {
                        id = new Random().Next(),
                        name = PersonModel.name
                    });
    
                    if (HttpContext.Request.IsAjaxRequest())
                        return Json(
                                        PersonData.listPerson.OrderByDescending(p => p.id)
                                       , JsonRequestBehavior.AllowGet
                                    );
    
                    return View();
                }
                catch
                {
                    return View();
                }
            }
        }

    here is the model

       public class PersonModel
        {
            public List<Person> PersonItems { get; set; }
        }
    
        public static class PersonData
        {
            public static List<Person> listPerson { get; set; }
    
            static PersonData()
            {
                listPerson = new List<Person>
                {
                    new Person { id=1 ,name="françois"},
                    new Person { id= 2,name="Michel"},
                    new Person { id=3 ,name="Mathieu"},
                    new Person { id=-1 }
                };
            }
        }
    
        public class Person
        {
            public int id { get; set; }
            public string name { get; set; }
        }

     here is th view

    @model WebApplication.Controllers.PersonModel
    
    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    
        $(function () {
            for (i = 0; i < @Model.PersonItems.Count(); i++) {
                fireClickEvent(i);
            }
    
            function getPerson(index) {
                var name = $("#PersonItems_"+index+"__name").val();
                return { Name: name};
            }
    
            function fireClickEvent(index) {
    
                $("#btnValidate__"+index).click(function () {
                    var person = getPerson(index);
                    if (person == null) {
                        alert("Specify a name please!");
                        return;
                    }
    
                    // take the data and post it via json
                    $.post("Home/Create", person, function (data) {
                        // get the result and do some magic with it
                        debugger;
                        var message = data.Message;
    
                        $("#resultMessage").html(message);
                    });
                });
            }
    
        });
    </script>
    <h2>Index</h2>
    
    <table class="table">
        <tr>
            <th>
                @Html.Label("name")
            </th>
            <th></th>
        </tr>
    
        @for (int i = 0; i < Model.PersonItems.Count(); i++)
        {
            <tr>
                <td>
                    @Html.EditorFor(x => x.PersonItems[i].name)
                </td>
                <td>
                    @if (i == Model.PersonItems.Count() - 1)
                    {
                        <input id=@string.Format("btnValidate__{0}", i) type="submit" class="btn btn-success" value="Add" />
                    }
                    else
                    {
                        <input id=@string.Format("btnValidate__{0}", i) type="submit" class="btn btn-warning" value="Update" />
                    }
                </td>
            </tr>
        }
    </table>

    regards

    Saturday, May 21, 2016 1:05 PM

Answers

  • User61956409 posted

    Hi Olivier DUBOIS,

    inserted data (value of person ) in create action is filled orrectly and also the returned data in ajax success callback is filled correctly but the result is not dislayed on view

    var message = data.Message;

    I’d like to know the value of return data Message property.

    $("#resultMessage").html(message);

    From your html markup, we could not find any elements with ID named “resultMessage”.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 30, 2016 8:43 AM

All replies

  • User61956409 posted

    Hi Olivier DUBOIS,

    Do you debug the code to check the value of person you post to the action Create and the value of the returned data on AJAX success callback function?

    Best Regards,

    Fei Han

    Monday, May 23, 2016 6:52 AM
  • User-1787558873 posted

    he, inserted data (value of person ) in create action is filled orrectly and also the returned data in ajax success callback is filled correctly but the result is not dislayed on view

    regards

    Monday, May 23, 2016 8:43 PM
  • User61956409 posted

    Hi Olivier DUBOIS,

    inserted data (value of person ) in create action is filled orrectly and also the returned data in ajax success callback is filled correctly but the result is not dislayed on view

    var message = data.Message;

    I’d like to know the value of return data Message property.

    $("#resultMessage").html(message);

    From your html markup, we could not find any elements with ID named “resultMessage”.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 30, 2016 8:43 AM