0

This is the site.js code I am using to insert the PartialView into the main View.

$("#btn2").click(function () {
    $.ajax({
        url: "/Home/RefreshDoors",
        datatype: "text",
        type: "POST",
        success: function (data) {
            $('#DoorBox').html(data);
        },
        error: function () {
            $("#DoorBox").html("ERROR");
        }
    });
});

I want to place the resulting table inside a box (div with the id="DoorBox") however as a result I get a raw view of the returned Door-Json-Objects: (imgur-link to screenshot)

This is the div-code inside the view:

<div id="DoorBox">

</div>

This is the code from the HomeController I use to render the PartialView:

[HttpPost]
        public PartialViewResult RefreshDoors()
        {
            return PartialView("_Doors", RefreshDoorsFunction().Result);
        }

How do I get the code to insert the PartialView (just a table with the properties of the door-model displaying the doors)) to render within the div-box (without refreshing the page)?

Edit: Here is the code from the RefreshDoorsFunction():

public async Task<List<NewDoor>> RefreshDoorsFunction()
        {
            string token = await _auth.GetTokenAsync();
            _doorList = SecureRestCall.GetDoorListAsync("https://exampleapi.azurewebsites.net", token);
            return _doorList.Result;
        }
kirru-two
  • 1
  • 1
  • Change to: `datatype: "html",` - In your `ajax`? Also, what does `RefreshDoorsFunction()` do? Are you model binding in your partial view? – Ryan Wilson Feb 10 '20 at 20:52
  • Does this answer your question? [Return a PartialView from $.Ajax Post](https://stackoverflow.com/questions/3490059/return-a-partialview-from-ajax-post) – Ryan Wilson Feb 10 '20 at 20:56
  • Does the view `_Doors` exist and in right location and produce `html` correctly? – Dongdong Feb 10 '20 at 20:56
  • Did you try to remove `datatype: "text"` ? What's the code of `_Doors` partial view and the `RefreshDoorsFunction().Result` ? – Xueli Chen Feb 11 '20 at 09:19
  • @RyanWilson @xueli-chen I added the code of the RefreshDoorsFunction(). Both changing to `datatype: "html"` and removing it doesn't help. The _Doors view renders correctly when using `@Html.Partial`. One thing is that regardless of what changes I make it always renders the full raw JsonObjects like in the screenshot from the post. – kirru-two Feb 11 '20 at 13:47
  • Why are you doing this? -> `_doorList = SecureRestCall.GetDoorListAsync("https://exampleapi.azurewebsites.net", token); return _doorList.Result;` Why not -> `_doorList = await SecureRestCall.GetDoorListAsync("https://exampleapi.azurewebsites.net", token); return _doorList;` and then in `[HttpPost] public PartialViewResult RefreshDoors() { return PartialView("_Doors", RefreshDoorsFunction().Result); }' do '[HttpPost] public async Task RefreshDoors() {return PartialView("_Doors",await RefreshDoorsFunction());}` – Ryan Wilson Feb 11 '20 at 14:13
  • I got the answer, it was me messing up the button's id in the view. It works as intended now, thanks for the help. – kirru-two Feb 11 '20 at 15:35

1 Answers1

0

I got the answer. Turns out I'm just stupid: I used the wrong button to test the ajax function (wrong id assigned to the button). It works now. Sorry for wasting some people's time.

kirru-two
  • 1
  • 1