Home MVC .Net Core Entity Framework how to pass EditorForModel form data thru Ajax
Reply: 1

MVC .Net Core Entity Framework how to pass EditorForModel form data thru Ajax

Joe Higley
1#
Joe Higley Published in 2017-11-11 02:54:43Z

I'm trying to use Ajax to pass my form data for creating a database object to the create action. I am doing this because I want to update a partial when it is successful. I cannot however seem to retrieve the data from the form.

I have tried passing the model thru the url like so but it turns up empty:

<button type="submit" onclick="javascript: CreateEntity('@Url.Action("CreateItem", "Home", Model)')">Submit</button>

<script>
    function CreateEntity(createAction) {
    $.ajax({
        type: "POST",
        url: createAction,
        dataType: 'html',
        success: function (data) {
            $('#form-container).html(data);
        }
    });
}
</script>

I have also tried passing the model into ajax as a json string but I get a weird incorrect syntax error:

<button type="submit" onclick="javascript: CreateEntity('@Url.Action("CreateItem", "Home")', '@Html.Raw(Json.Serialize(Model))')">Submit</button>

<script>
    function CreateEntity(createAction, entity) {
    var model = JSON.parse(entity);
    $.ajax({
        type: "POST",
        url: createAction,
        data: { model: model },
        dataType: 'html',
        success: function (data) {
            $('#form-container).html(data);
        }
    });
}
</script>

My Create action looks basically like this:

public IActionResult (Item model) 
{
    //save model to db
}

But all of the models fields come back as 0 or null no matter what I entered in the form.

Edit:

The Form is being generated by EntityFramework like so:

@Html.EditorForModel()

I need to be able to take the input from this and pass it thru ajax.

Shyju
2#
Shyju Reply to 2017-11-11 14:22:15Z

The EditorForModel helper method renders input element for each property in your model. But your attempt was to pass the serialized version of model passed to the view , which does not makes sense because that C# line will be executed when razor renders the page and it will not have the values user entered.

If you want to make an ajax call with the input form elements to server, you need to read the value of each one of them and build a js object matching to the structure of your Item class and use that to make your ajax call. But there is an easy way to do this. You can simply keep your input elements inside a form and use jQuery serialize method to generate the serialized version of your string and send that.

@model Item
<form asp-action="Create" id="create-form" method="post">
    @Html.EditorForModel()
    <button type="submit" id="btn-save">Submit</button>
</form>
<div id="form-container"></div>

This will render input elements for each property in the Item class, inside the form along with the submit button.

Now wire up the submit event on this form, and serialize the form and use that for the ajax call.

$(function() {
    $("#create-form").submit(function (e) {
        var $form = $(this);
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: $form.attr("action"),
            data: $form.serialize()
        }).done(function(data) {
            $('#form-container').html(data);
        });
    });
})

Personally i would not use the EditorFor with any entity classes created by EF. You should consider using view models which has only properties needed for the specific view. Even with that, It is rare that i use EditorForModel unless it is a tiny view model ( I like writing markup for my input elements where i have full control on how the markup should be )

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.319249 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO