Razor Pages ASP.NET unobtrusive ajax Post partial update

Question

I'm trying to update only part of my page from a partial View. It works perfectly fine if i use this

<a href="" data-ajax-met data-ajax="true" data-ajax-url="/Index?Handler=Partial" data-ajax-update="#panel">Click heeeeeeeere</a>

But this is a simple get and i'd like to actually post some data and do something with it. I wrote a form, set its method to post like this.

<form method="post" data-ajax="true" data-ajax-method="post" data-ajax-complete="completed" data-ajax-update="#panel" >
    <div class="row">
        id : @Html.TextBoxFor(x => x.customer.ID)
    </div>
    <div class="row">
        Name : @Html.TextBoxFor(x => x.customer.Name)
    </div>

    <div class="row">
        <input type="submit" value="send data" />
    </div>
</form>

BUT this updates my entire page so my entire page is just the little partial view thats supposed to be updated.

score 1 · Answer 1 · answered Aug 06 '19 at 12:13

a first observation, it seems you are missing the data-ajax-url from the second form . Saying that, then in your Razor view you should include on the top of the page

@page "{handler?}"

This will allow you to pass additional information to your handler, then in your form you can simply include something like

<input type="hidden" name="id" value="send value"/>

where value is the value you want to pass and name is how the handler will identify what property to bind this to, then in your .cshtml.cs page your handler should look something like this

public IActionResult OnPostPartial(string id) {...//do something here id == "send value"}

hope this helps

Razor Pages ASP.NET unobtrusive ajax Post partial update

1 Answers1