locked
Calling a method with Ajax and returning a view RRS feed

  • Question

  • User-91046586 posted

    <div>I have a method Show which returns a view Show with a model. I use that model to populate two Kendo grids.</div> <div>In the Show view,  I have a button which on click, sends a model from the view to a method Save in the controller. </div> <div>Due to the fact that I call the Save method via an ajax call, I cannot return a view in the Save method. </div> <div> </div> <div>I tried two solutions.</div> <div> </div> <div>I tried to create a third method, let's call it Test for the sake of the argument and I tried to use </div> <div>RedirectToAction from Save and redirect it to Test but I found out that RedirectToAction does not work with an ajax call.  </div> <div> </div> <div>I decided to try with a partial view but it's also not working.</div> <div></div> <div>

    public ActionResult SaveFile(List<Model> model, int type)  
            {  
                   //code shortened for brevity  
                   return PartialView(model, type);  
             } 

    This also does not work. I am kind of stuck with this internship task I got with an existing .net core app and I am not sure how to proceed. 

    Monday, August 24, 2020 10:31 PM

All replies

  • User-474980206 posted

    The Ajax class needs to display the html returned from the action.

    Tuesday, August 25, 2020 2:51 AM
  • User711641945 posted

    Hi Cucko90:

    It seems that you want to return to ParcialView through Ajax call method, here is a simple example hope to help you:

    Model:

    public class Lesson
    {
            public string Name { get; set; }
            public int Grade { get; set; }
            public string Objectives { get; set; }
            public string Description { get; set; }
    }

    View(Create.cshtml):

    <form method="post" id="CreateLesson" enctype="multipart/form-data">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <h4>Name</h4>
        <input type="text" class="form-control" name="name" value="" />
        <h4>Grade</h4>
        <input type="text" class="form-control" name="grade" value="" />
        <h4>Objectives</h4>
        <input type="text" class="form-control" name="objectives" value="" />
        <h4>Description</h4>
        <input type="text" class="form-control" name="description" value="" />
       <input type="submit" value="Save" class="btn btn-primary" />
    </form>
    @section Scripts
    {
        <script>
            $('#CreateLesson').submit(function (e) {
                e.preventDefault();
                var formData = new FormData($('#CreateLesson')[0]);
                $.ajax({
                    type: "POST",
                    url: "/ObjectAs/CrossPartial",
                    async: true,
                    data: formData,
                    dataType: "html",
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (datas) {
                        $("#CreateLesson").html(datas);
                    }
                });
            });
        </script>
    }

    Partial View(_CrossPartial.cshtml):

    @model Lesson
    <h4>This is PartialView</h4>
    <div >
            <span>Name: </span> @Html.EditorFor(m => m.Name);
            <span>Grade: </span> @Html.EditorFor(m => m.Grade);
            <span>Objectives: </span> @Html.EditorFor(m => m.Objectives);
            <span>Description: </span> @Html.EditorFor(m => m.Description);
    </div>

    Controller:

    public IActionResult Create()
    {
          return View();
    }
    [HttpPost]
    public IActionResult CrossPartial(Lesson lessons)
    {
          return PartialView("_CrossPartial",lessons);
     }

    Result:

    Best Regards,

    Rena

    Tuesday, August 25, 2020 6:02 AM