asp.net mvc - Loading partial view on button click only fires on the first click -

asp.net mvc - Loading partial view on button click only fires on the first click -

i have next code:

@model pedidosonlinemvc.models.superuser @{ viewbag.title = "mysystem"; layout = "~/views/shared/_layout.cshtml"; } <h2>administration</h2> @html.antiforgerytoken() @using(var p = html.bootstrap().begin(new panel())) { using (p.beginbody()) { @html.bootstrap().button().text("register new administrator").id("btnreg") @html.bootstrap().button().text("list administrators").id("btnlist") @html.bootstrap().button().text("search administrator").id("btnseek") using (var ip = html.bootstrap().begin(new panel())) { using (ip.beginbody()) { <div id="partials"> </div> } } } }

and proper jquery coded:

$(document).ready( function () { $('#btnreg').click(function () { $.get('@url.action("partialregadmin", "superuser")', function (data) { $('#partials').replacewith(data); }); }); $('#btnlist').click(function () { $.get('@url.action("partiallistadmin", "superuser")', function (data) { $('#partials').replacewith(data); }); }); $('#btnseek').click(function () { $.get('@url.action("partialseekadmin", "superuser")', function (data) { $('#partials').replacewith(data); }); }); });

and works fine on first click of of 3 buttons, but, after clicking one, other 2 won't work anymore. i've read posts here sying caching problem, tried using $.ajax({cache: false}), tried using [outputcache(duration = 0)], tried creating next attribute:

public class nocacheattribute : actionfilterattribute { public override void onactionexecuted(actionexecutedcontext filtercontext) { filtercontext.httpcontext.response.cache.setmaxage(new timespan(0, 0, 0, 0)); filtercontext.httpcontext.response.cache.setcacheability(httpcacheability.nocache); } }

all no use... has thought of wrong?

edit: requested code partial partialregadmin view:

@model pedidosonlinemvc.models.administrador @using (var f = html.bootstrap().begin(new form())) { @f.formgroup().customcontrols(html.antiforgerytoken()) @f.formgroup().textboxfor(model=>model.nome) @f.formgroup().textboxfor(model=>model.cpf).data(new {mask="999.999.999-99"}) @f.formgroup().textboxfor(model=>model.telefone) @f.formgroup().textboxfor(model=>model.login) @f.formgroup().passwordfor(model=>model.senha) @f.formgroup().customcontrols(@html.bootstrap().submitbutton().text("cadastrar")) }

you want

$('#partials').html(data);

instead of

$('#partials').replacewith(data);

basically when click first time, #partials on page replaced whatever html returned server. partialview contains no element id partials, consequent calls $('#partials') find nothing, nil replaced.

html on other hand replace content, leaving partials on page farther usage.

asp.net-mvc model-view-controller twitter-bootstrap-3 partial-views