Reputation: 501
I have a form that requires user input with two buttons: one button to submit
the form values and the other button is to load a partial view
. I'm not sure if my approach here is correct though. The submit
button works perfectly fine however clicking the button with GenerateBtn
id does not fire the DisplayProposal()
function that loads the partial view
. Any idea to solve or a better approach??
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Proposal</h4>
<hr />
@Html.ValidationSummary("", new { @class = "text-danger" })
@Html.HiddenFor(model => model.id)
<div class="form-group">
@Html.LabelFor(model => model.item, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.item, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<h2>Generated Questions</h2>
<div id="ProposalTable"></div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="Generate" class="btn btn-default" id="GenerateBtn" />
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>
document.getElementById("GenerateBtn").onclick = function () { DisplayProposal() };
function DisplayProposal() {
//Loads Partial View to <div>ProposalTable</div>
$('ProposalTable').load('@Url.Action("LoadStuff", "Proposals")');
}
</script>
}
Upvotes: 0
Views: 4237
Reputation: 1764
Any reason you aren't using jquery:
$(document).ready(function(){
$("#GenerateBtn").click(function(){
DisplayProposal();
});
});
Upvotes: 1