Passing ViewModel From View To Controller Via ajax

Question

User1185448985 posted

I would like some help solving the problem of passing the view model form the view to the controller using Ajax

My code results into null values for the parameters in the action.

View:

@model TestApplication.Models.ViewModels.CreateStoryViewModel
<form method="post" id="myForm">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div><label>Title</label> <input asp-for="Story.Title" type="text" class="form-control" id="storyTitle" /></div>
<div><label>Child</label> <input asp-for="Child.Id" type="text" class="form-control" id="childId" /></div>
<div><input type="submit" id="create" value="Create" /></div>
</form>

Action:

        public async Task<IActionResult> Create(CreateStoryViewModel model, string v1)

Script:

@section Scripts
{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$(document).ready(function () {
           $('#myForm').submit(function (e) {
                e.preventDefault();
                var vmodel = new FormData($('#myForm')[0]);
                var test= "test";
                var viewModel = {
                    "Story": story,
                    "Child": child
                }

                $.ajax({
                    type: "POST",
                    url: "/Story/Create",
                    data: {
                        v1: test,
                        model: vmodel
                    },
                    dataType: 'json',
                    success: function (data) {
                    },
                    error: function (data) {

                    }
                });

           });
 });
}

ViewModel:

public class CreateStoryViewModel
    {

        public Childs Child { get; set; }
        public Story Story { get; set; }
        public string v1{ get; set; }
    }

Thank you in advance

Answer 1

User711641945 posted

Hi Amani AI,

Here is a working demo:

Model:

public class CreateStoryViewModel
{
    public Childs Child { get; set; }
    public Story Story { get; set; }
    public string v1 { get; set; }
}

public class Story
{
    public string Title { get; set; }
}

public class Childs
{
    public int Id { get; set; }
}

View:

@model CreateStoryViewModel

<form method="post" id="myForm">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div><label>Title</label> <input asp-for="Story.Title" type="text" class="form-control" id="storyTitle" /></div>
    <div><label>Child</label> <input asp-for="Child.Id" type="text" class="form-control" id="childId" /></div>
    <div><input type="submit" id="create" value="Create" /></div>
</form>
@section Scripts
{
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myForm').submit(function (e) {
                e.preventDefault();
                var vmodel = new FormData($('#myForm')[0]);
                var test = "test";
                var title = vmodel.get('Story.Title')
                var id = vmodel.get('Child.Id')
                $.ajax({
                    type: "POST",
                    url: "/Story/Create",
                    data: {
                        model: {
                            Child: { Id: id },
                            Story: { Title: title },
                            v1: test
                        },
                        v1: test
                    },
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                    },
                    error: function (data) {
                    }
                });
            });
        });
    </script>
}

Controller:

[HttpPost]
public async Task<IActionResult> Create(CreateStoryViewModel model, string v1) 
{
    //do your stuff...
}

Result:

Best Regards,

Rena

Answer 2

User-2054057000 posted

Here in your case you have to simply call action method (located in a controller) from a View using jQuery AJAX.  You can check this article which will answer all your questions - How to use jQuery AJAX method to call an Action method in ASP.NET Core

Answer 3

User1185448985 posted

Mr.Rena you've solved the problem perfectly.

Thank you for delivering your point of view clearly through your post.

I can't thank you enough YOU ARE THE BEST!!

Answer 4

User1185448985 posted

thank you mr.yogyogi i appreciate your help.