I have a view with a form, when that form is submitted I want to show another view inside the first view. I have tried with partialview (not sure that is for my purpose?) but I cant get it to work because the model is null (its strongly-typed partialview). But I just want it to be created on the submitbutton and then it should be OK.
So, help my create a view/partialview inside a when submitting my form. Right now I get "Object reference not set to an instance of an object." on the foreach loop in my partial view, but it's not supposed to be created until the form is submitted.
My view:
<div class="calcInput">
#using (Html.BeginForm("ShowDetail", "Calculation"))
{
<div class="calculateBox">
<label for="calcOption">Choose value to calculate:</label>
<select form="anFormCalcInput" id="calcOption" title="Choose what value you want to calculate">
<option value="anPMT">Payment (PMT)</option>
<option value="anI">Interest (I)</option>
<option value="anFV">Future value (FV)</option>
<option value="anPV">Present value (PV)</option>
</select>
</div>
<div class="calculateBox" background-color="#777777">
#Html.Label("Present value (PV)")
#Html.TextBox("PresentValue")
#Html.Label("Future value")
#Html.TextBox("FutureValue")
#Html.Label("Interest rate")
#Html.TextBox("InterestRate") <br />
<input type="radio" name="advanceOrArrears" id="inAdvance" value="inAdvance" /> In advance<br />
<input type="radio" name="advanceOrArrears" id="inArrears" value="inArrears" /> In arrears
</div>
<div class="calculateBox">
<label for="startDate">Start date:</label>
<input type="date" id="anStartDate" name="startdate" title="Choose start date for your calculation" /><br />
#Html.Label("Payment frequency")
<select form="anFormCalcInput" id="anPmtFreq" title="Choose the payment frequency, for example: Every month">
<option value="Monthly">Monthly</option>
<option value="Quarterly">Quarterly</option>
<option value="Yearly">Yearly</option>
</select><br /><br />
#Html.Label("No of payment periods")
#Html.TextBox("PaymentPeriods")
#Html.Label("Date time convention")
<select form="anFormCalcInput" id="anDTC" title="Choose your Date time convention">
<option value="360360">360/360</option>
<option value="365365">365/365</option>
</select><br /><br />
<input type="submit" id="anCalcBtn" class="calcBtn" name="anSubmitBtn" value="Calculate" title="Calculate your calculation" />
</div>
}
</div>
<table cellspacing="0" width="80%">
<div class="calcGraph">
</div>
<div class="calcDetail" id="anCalcDetail">
#Html.Partial("ShowDetail") //This is where I want my view/partialview to show up
</div>
My partialview:
#model IEnumerable<CalcFactory.Models.Calculation>
<table cellspacing="0" width="80%">
<thead>
<tr>
<th>
Date
</th>
<th>
Invoice amount
</th>
<th>
Interest rate
</th>
<th>
Interest amount
</th>
<th>
Amortization
</th>
<th>
Capital balance
</th>
<th></th>
</tr>
</thead>
<tr>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center" id="startValue">
</td>
</tr>
#foreach (var item in Model) { //this is where i get null exception, model is null. But it supposed to be created on submit button...
<tr>
<td>
#Html.DisplayFor(modelItem => item.Date)
</td>
<td>
#Html.DisplayFor(modelItem => item.InvoiceAmount)
</td>
<td>
#Html.DisplayFor(modelItem => item.InterestRate)
</td>
<td>
#Html.DisplayFor(modelItem => item.InterestAmount)
</td>
<td>
#Html.DisplayFor(modelItem => item.Amortization)
</td>
<td>
#Html.DisplayFor(modelItem => item.PresentValue)
</td>
</tr>
}
My Controller:
public class CalculationController : Controller
{
public PartialViewResult ShowDetail(FormCollection form)
{
List<Calculation> cList = new List<Calculation>();
Calculation calc = new Calculation();
calc.Date = Convert.ToDateTime(form["startdate"]);
calc.InvoiceAmount = 2000;
calc.InterestRate = Convert.ToDouble(form["InterestRate"]);
calc.InterestAmount = (Convert.ToDouble(form["PresentValue"]) * Convert.ToDouble(form["InterestRate"]) / 360 * 30);
calc.Amortization = (2000 - (Convert.ToDouble(form["PresentValue"]) * Convert.ToDouble(form["InterestRate"]) / 360 * 30));
calc.PresentValue = Convert.ToDouble(form["PresentValue"]) - calc.Amortization;
cList.Add(calc);
for (int i = 0; i < Convert.ToInt32(form["PaymentPeriods"]); i++)
{
Calculation calcBefore = cList.Last();
calc = new Calculation();
calc.Date = calcBefore.Date.AddMonths(1);
calc.InvoiceAmount = 2000;
calc.InterestRate = Convert.ToDouble(form["InterestRate"]);
calc.InterestAmount = (calcBefore.PresentValue * Convert.ToDouble(form["InterestRate"]) / 360 * 30);
calc.Amortization = (calc.InvoiceAmount - (calcBefore.PresentValue * calc.InterestRate / 360 * 30));
calc.PresentValue = calcBefore.PresentValue - calc.Amortization;
cList.Add(calc);
}
return PartialView("ShowDetail", cList);
}
}
Related
I'm new to .Net Razor pages and followed this tutorial by FreeCodeCamp
I made an Index page with the help of the tutorial and wanted to add a copy button beside the entries but can't find a way to do so, here is the image of how the table looks, and here is the code:
//Index.cshtml.cs
private readonly ApplicationDbContext _db;
public IndexModel(ApplicationDbContext db)
{
_db = db;
}
public IEnumerable<PasswordEntry> PasswordEntries { get; set; }
public async Task OnGet()
{
PasswordEntries = await _db.PasswordEntry.ToListAsync();
}
//Index.cshtml
<br />
<div class="container row p-0 m-0">
<div class="col-9">
<h4>Passwords</h4>
</div>
</div>
<div class="col-12 border p-3 mt-3">
<form method="post">
#if (Model.PasswordEntries.Count() > 0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Name"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Url"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Email"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Username"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Password"></label>
</th>
<th>
</th>
</tr>
#foreach (var item in Model.PasswordEntries)
{
<tr>
<td>
#Html.DisplayFor(m => item.Name)
</td>
<td>
#Html.DisplayFor(m => item.Url)
</td>
<td>
#Html.DisplayFor(m => item.Email)
</td>
<td>
#Html.DisplayFor(m => item.Username)
</td>
<td>
#Html.TextBoxFor(m => item.Password, new { type = "password", disabled = "disabled" })
</td>
<td>
<button asp-page-handler="Delete" asp-route-id="#item.Id">Delete</button>
<a asp-page="Edit" asp-route-id="#item.Id">Edit</a>
</td>
</tr>
}
</table>
}
else
{
<h1>no entries available</h1>
}
</form>
</div>
I did try adding a copy button beside the delete and edit buttons with onClick function, on click it would call a funcition in #section Script area, but it didn't work probably cause the foreach loop ends after displaying the result,
what would be a good way to implement the copy button?
If you want to copy the line when click Copy button,here is a demo:
<div class="col-12 border p-3 mt-3">
<form method="post">
#if (Model.PasswordEntries.Count() > 0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Name"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Url"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Email"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Username"></label>
</th>
<th>
<label asp-for="PasswordEntries.FirstOrDefault().Password"></label>
</th>
<th>
</th>
</tr>
#foreach (var item in Model.PasswordEntries)
{
<tr>
<td>
#Html.DisplayFor(m => item.Name)
</td>
<td>
#Html.DisplayFor(m => item.Url)
</td>
<td>
#Html.DisplayFor(m => item.Email)
</td>
<td>
#Html.DisplayFor(m => item.Username)
</td>
<td>
#Html.TextBoxFor(m => item.Password, new { type = "password", disabled = "disabled" })
</td>
<td>
<button asp-page-handler="Delete" asp-route-id="#item.Id">Delete</button>
<button onclick="copy(this)">Copy</button>
<a asp-page="Edit" asp-route-id="#item.Id">Edit</a>
</td>
</tr>
}
</table>
}
else
{
<h1>no entries available</h1>
}
</form>
</div>
js:
#section Scripts{
<script>
function copy(t) {
$("table")[0].innerHTML += $(t).parent().parent()[0].outerHTML;
}
</script>
}
result:
Update:
If you want to copy password to clipboard.Try to use the folowing js function:
function copy(t) {
var password = $(t).parent().parent()[0].children[4].children[0].value;
navigator.clipboard.writeText(password);
}
I create a view and create two cards to show new skill and current skill.
The problem is TittleNewSkillEHS back to the controller cero data after I select a new skill.
Short description of my request
I will need to display two lists with information about New Skill (required checkbox to select and add current skill), Current skill (required update target).
One approached to solution the request I create a view model take EmployeeTitle id, Title name, and two list
• List Current skills
• List New skills
.
.
.
TitleSkillVM TitleSkillVMNew = new TitleSkillVM();
TitleSkillVMNew.TitleId = SelectTitle.TitleId;
TitleSkillVMNew.TitleDescription = SelectTitle.TitleName;
TitleSkillVMNew.TittleNewSkillEHS = _tempNewEHS; “New skill”
TitleSkillVMNew.TittleSkillEHS = _tempEHS; “List Current skill”
return View(TitleSkillVMNew);
}
#model WCMApps.Models.ViewModel.TitleSkillVM
<div class="row">
<div class="col-sm-6">
<form asp-controller="AdmTitles" asp-action="InsertNewSkillTarget" method="post">
<input type="hidden" asp-for="TitleId" />
<%: Html.HiddenIndexerInputForModel() %>
<input type="hidden" asp-for="TittleNewSkillEHS" />
<div class=" card">
<div class="card-header">
<div class="container">
<div class="row">
<div class="col-9">
<h4>New Skill Index</h4>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th scope="col">
Skill Name
</th>
<th scope="col">
Current Target
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TittleNewSkillEHS)
{
if (item.TitleSkillTargetStatus == true)
{
<tr class="table-info">
<td>
#Html.CheckBoxFor(modelItem => item.IsSelectedNewSkillTitle, item.TitleSkillTargetId)
#Html.HiddenFor(modelItem => item.TitleSkillTargetId)
</td>
<td>
#Html.DisplayFor(modelItem => item.SkillLevelDDescription)
#Html.HiddenFor(modelItem => item.SkillLevelDDescription)
</td>
<td>
#Html.DisplayFor(modelItem => item.Target)
#Html.HiddenFor(modelItem => item.Target)
</td>
</tr>
}
}
</tbody>
</table>
</div>
<div class="card-footer">
<small class="text-muted">
<button type="submit" class="btn btn-outline-info" onclick="location.href='#Url.Action("InsertNewSkillTarget", "AdmTitles", Model.TittleNewSkillEHS)'">Save</button>
</small>
</div>
</div>
</form>
</div>
<div class="col-sm-6">
<form asp-controller="AdmTitles" asp-action="UpdateCurrentSkillTarget" method="post">
<div class="card">
<div class="card-header">
<div class="container">
<div class="row">
<div class="col-9">
<h4>Current Skill Index</h4>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">
Skill Name
</th>
<th scope="col">
Current Target
</th>
<th scope="col">
Target
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TittleSkillEHS)
{
if (item.TitleSkillTargetStatus == true)
{
<tr class="table-success">
<td>
#Html.DisplayFor(modelItem => item.SkillLevelDDescription)
</td>
<td>
#Html.DisplayFor(modelItem => item.Target)
</td>
<td>
<div class="form-group">
<input asp-for="Target" class="form-control" />
<span asp-validation-for="Target" class="text-danger"></span>
</div>
</td>
</tr>
}
}
</tbody>
</table>
</div>
<div class="card-footer">
<small class="text-muted">
<button type="button" class="btn btn-outline-info" onclick="location.href='#Url.Action("UpdateCurrentSkillTarget", "AdmTitles", Model.TittleSkillEHS)'">Update</button>
</small>
</div>
</div>
</form>
</div>
</div>'
Here is a demo to pass TittleNewSkillEHS to Controller:
View:
<div class="card-header">
<div class="container">
<div class="row">
<div class="col-9">
<h4>New Skill Index</h4>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th scope="col">
Skill Name
</th>
<th scope="col">
Current Target
</th>
</tr>
</thead>
<tbody>
#{ var count = 0;}
#foreach (var item in Model.TittleNewSkillEHS)
{
if (item.TitleSkillTargetStatus == true)
{
<tr class="table-info">
<td>
#*#Html.CheckBoxFor(modelItem => item.IsSelectedNewSkillTitle, new { #name = "TittleNewSkillEHS[#count].IsSelectedNewSkillTitle" })
#Html.CheckBox("IsChecked", new { #name = "TittleNewSkillEHS[#count].IsSelectedNewSkillTitle" })*#
<input asp-for=#item.IsSelectedNewSkillTitle name="TittleNewSkillEHS[#count].IsSelectedNewSkillTitle"/>
<input name="TittleNewSkillEHS[#count].TitleSkillTargetId" value=#item.TitleSkillTargetId hidden />
</td>
<td>
#Html.DisplayFor(modelItem => item.SkillLevelDDescription)
<input name="TittleNewSkillEHS[#count].SkillLevelDDescription" value=#item.SkillLevelDDescription hidden />
#*#Html.HiddenFor(modelItem => item.SkillLevelDDescription)*#
</td>
<td>
#Html.DisplayFor(modelItem => item.Target)
<input name="TittleNewSkillEHS[#count].Target" value=#item.Target hidden />
#*#Html.HiddenFor(modelItem => item.Target)*#
</td>
</tr>
count++;
}
}
</tbody>
</table>
</div>
<div class="card-footer">
<small class="text-muted">
<button type="submit" class="btn btn-outline-info">Save</button>
</small>
</div>
</div>
Controller:
public IActionResult InsertNewSkillTarget(TitleSkillVM t) {
return Ok();
}
result:
I want to implement a bulk operation function, but I cannot post my data to the razor page code behind, anyone can help? Please check my code below
<form method="post" asp-page="./Index">
<div class="row">
<div class="col-md-12">
<table class="table table-hover table-bordered" style="margin-top:15px;">
<thead>
<tr class="info">
<th></th>
<th>
<a asp-page="./Index" asp-route-sortOrder="#Model.NumberSort">
#Html.DisplayNameFor(model => model.Products[0].Number)
</a>
</th>
<th>
#Html.DisplayNameFor(model => model.Products[0].Name)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Products)
{
<tr>
<td>
#Html.CheckBoxFor(modelItem => item.Checked)
</td>
<td class="success">
#Html.DisplayFor(modelItem => item.Number)
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
<a asp-page="./Details" asp-route-id="#item.ID" class="btn btn-info">details</a>
<a asp-page="./Edit" asp-route-id="#item.ID" class="btn btn-warning">edit</a>
<a asp-page="./Delete" asp-route-id="#item.ID" class="btn btn-danger">delete</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-10">
#{
var items = Model.Products.Where(x => x.Checked);
}
<input type="submit" name="bulkUpload" value="bulk upload" asp-route-data="#items"/>
</div>
</div>
</form>
public async Task OnPostAsync(List<Product> upload)
{
}
You need to render your products in such way that the Modelbinder will be able to pick them up on form submit and pass them into the codebehind.
Something like this (done by hand so it might not compile at first):
#{
for (int i = 0; i < Model.Products.Count; i++)
{
<input type="checkbox" asp-for="Model.Produtcs[i].Checked" />
#Model.Products[i].Number
#Model.Products[i].Name
}
}
This will render HTML like
<input type="checkbox" name="Products[0].Checked" />
<input type="checkbox" name="Products[1].Checked" />
<input type="checkbox" name="Products[2].Checked" />
And it should get back to your OnPostAsync. If not then try changing
public async Task OnPostAsync(List<Product> upload)
to
public async Task OnPostAsync(YourModel model)
What ever your full model is named.
This is then redundant:
#{
var items = Model.Products.Where(x => x.Checked);
}
So I've got a HtmlPage with 2 forms in it, not one of those have Id to get.
I've tried to get them by getting the last child on the body (which is the form I need to get), I've been trying to receive it on a HTMLFORM element, but no luck. Any ideas?
Edit:
I'm adding the part of the code you can see :(
<table width="650" bordercolor="#cccccc" bgcolor="white" border="1">
<tbody>
<tr>
<th>
<font size="1">ACCION </font>
</th>
<th>
<font size="1">ESTADO </font>
</th>
<th>
<font size="1">DESCRIPCION </font>
</th>
<th>
<font size="1">CANTIDAD </font>
</th>
</tr>
<form action="le_02pre_deim_anticipada.asp?submit=AA" method="post"></form>
<input name="cod_estado" type="hidden" value="100">
<input name="descrip" type="hidden" value="100">
<input name="buzon" type="hidden" value="B1_">
<input name="filtro_fecha" type="hidden" value="1">
<tr>
<td width="20%" align="CENTER">
<input name="SUBMIT" type="SUBMIT" value="SELECCIONAR"></td>
<td width="10%" align="CENTER">
<font size="2">100</font>
</td>
<td width="60%">
<font size="2">
Informadas en espera de la presentación en Bancos
</font>
</td>
<td width="10%" align="CENTER">
<font size="2">233</font>
</td>
</tr>
<form action="le_02pre_deim_anticipada.asp?submit=AA" method="post"></form>
<input name="cod_estado" type="hidden" value="200">
<input name="descrip" type="hidden" value="200">
<input name="buzon" type="hidden" value="B2_">
<input name="filtro_fecha" type="hidden" value="1">
<tr>
<td width="20%" align="CENTER" bgcolor="#cccccc">
<input name="SUBMIT" type="SUBMIT" value="SELECCIONAR"></td>
<td width="10%" align="CENTER" bgcolor="#cccccc">
<font size="2">200</font>
</td>
<td width="60%" bgcolor="#cccccc">
<font size="2">
Presentadas en entidades recaudadoras en espera de la Solicitud de Levante
</font>
</td>
<td width="10%" align="CENTER" bgcolor="#cccccc">
<font size="2">194</font>
</td>
</tr>
</tbody>
</table>
So I need to send this values through post.
<input name="cod_estado" type="hidden" value="200">
<input name="descrip" type="hidden" value="200">
<input name="buzon" type="hidden" value="B2_">
<input name="filtro_fecha" type="hidden" value="1">
I'm receiving the body on:
HtmlBody body0 = (HtmlBody)P0.Body;
I solved it :D
I just wanted to let you know how I solved this issue.
Not one element on the page has ID, but you can use the position of some markers to navigate it.
HtmlForm f02Submit = PageDecla.Forms[1];
HtmlSubmitInput SubM02 = (HtmlSubmitInput)PageDecla.GetElementsByName("SUBMIT")[1];
f02Submit.AppendChild(SubM02);
var count = f02Submit.ChildElementCount;
SubM02 = (HtmlSubmitInput)f02Submit.ChildNodes[count-1];
PaginaDecla = (HtmlPage)SubM02.Click();
f02Submit = null;
SubM02 = null;
int f = 0, hfImp = 0;
f = PaginaDecla.Forms.Count;
for (int i = 0; i < f; i++)
{
var form = PageDecla.Forms[i];
hfImp = form.ChildElementCount;
SubM02 = (HtmlSubmitInput)PageDecla.GetElementsByName("SUBMIT")[i];
for (int j = 0; j < hfImp; j++)
{
var hfI = (HtmlHiddenInput)form.ChildNodes[j];
var nameHF = hfI.NameAttribute;
var val = hfI.ValueAttribute;
if ((val == cod_int) && (nameHF == name))
{
form.AppendChild(SubM02);
hfImp = form.ChildElementCount;
var btn = (HtmlSubmitInput)form.ChildNodes[hfImp-1];
PageDecla = (HtmlPage)btn.Click();
j = hfImp;
i = f;
}
}
}
Thanks for those who tried, I know I did not provide that much information.
Ok thanks to you guys i got it nearly working now but i don't get why it won't reload the data the current code is:
My partial view:
#model IEnumerable<Smoelenboek.Models.Person>
#{
ViewBag.Title = "Search details";
}
<div class="searchresults">
<table>
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
Knowledge
</th>
<th>
#Html.DisplayNameFor(model => model.Email)
</th>
<th>
Skills to learn
</th>
<th>
Project
</th>
<th>
Years of work experience
</th>
<th>
Hobby projects
</th>
<th>
Summary
</th>
<th>
Extra Information
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.ActionLink(item.Name.ToString(), "/SearchSkillsDetails", new { id = item.ID })
</td>
<td>
#Html.DisplayFor(modelItem => item.LearntSkillsAndLevelOfSkills)
</td>
<td>
#Html.DisplayFor(modelItem => item.Email)
</td>
<td>
#Html.DisplayFor(modelItem => item.SkillsToLearn)
</td>
<td>
#Html.DisplayFor(modelItem => item.Stand)
</td>
<td>
#Html.DisplayFor(modelItem => item.YearsOfWorkExperience)
</td>
<td>
#Html.DisplayFor(modelItem => item.HobbyProjectICTRelated)
</td>
<td>
#Html.DisplayFor(modelItem => item.Summary)
</td>
<td>
#Html.DisplayFor(modelItem => item.ExtraInfo)
</td>
</tr>
}
</table>
</div>
my view:
#model IEnumerable<Smoelenboek.Models.Person>
#{
ViewBag.Title = "Search Skills";
}
<h2>Search People</h2>
#using (Html.BeginForm("SearchSkills", "Person", FormMethod.Get))
{
<div class="search">
#Html.TextBox("parameter")
<select name="choice" class="choicecheckbox">
<option id="knowsalready">Knows Already</option>
<option id="wantstolearn">Wants To Learn</option>
<option id="hobbies">Hobbies</option>
<option id="name">Name</option>
</select>
<input class="inputsearch" type="submit" value="Search" />
</div>
}
<br />
<h2>Search results</h2>
<div class="searchfilters">
<br />
<input id="checkboxlocationfilter" type="checkbox" name="locationFilter" class="locationFiltercss" onchange="changeFilter()">
<label for="checkboxlocationfilter" class="locationFiltercss">Filter on location</label>
<br />
<input id="checkboxlevelofknowledgefilter" type="checkbox" name="levelFilter" class="locationFiltercss">
<label for="checkboxlevelofknowledgefilter" class="locationFiltercss">Filter on skill level of knowledge</label>
<br />
<input id="checkboxlevelofwantstolearnfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
<label for="checkboxlevelofwantstolearnfilter" class="locationFiltercss">Filter on skills level of wants to learn</label>
<br />
<input id="checkboxpopularityfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
<label for="checkboxpopularityfilter" class="locationFiltercss">Filter on popularity</label>
<br />
<input id="checkboxhobbyprojectsfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
<label for="checkboxhobbyprojectsfilter" class="locationFiltercss">Filter on only hobbyprojects</label>
<br />
<input id="checkbox5yearsfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
<label for="checkbox5yearsfilter" class="locationFiltercss">Filter on years of work experience more than 5</label>
<script type="text/javascript">
$(checkbox5yearsfilter).click(function () {
if ($(checkbox5yearsfilter).is(':checked')) {
$.ajax({
type: 'POST',
url: '../Person/changeFilter',
datatype: 'html',
success: function (data) {
$('#_SearchSkills').html(data);
alert(data);
},
error: function (data) {
alert("failed");
}
});
}
});
</script>
<br />
<input id="checkbox10yearsfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
<label for="checkbox10yearsfilter" class="locationFiltercss">Filter on years of work experience more than 10</label>
<br />
<input id="checkbox15yearsfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
<label for="checkbox15yearsfilter" class="locationFiltercss">Filter on years of work experience more than 15</label>
<br />
<input id="checkboxphonenrfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
<label for="checkboxphonenrfilter" class="locationFiltercss">Has phone number</label>
<br />
<input id="checkboxextrainfoyfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
<label for="checkboxextrainfoyfilter" class="locationFiltercss">Has extra info</label>
<br />
<input id="checkboxextrainfonfilter" type="checkbox" name="levelFilter" class="locationFiltercss">
<label for="checkboxextrainfonfilter" class="locationFiltercss">doesn't have extra info</label>
</div>
<span>
#Html.Partial("_SearchSkills", ViewData.Model);
</span>
my controllermethod:
public PartialViewResult changeFilter()
{
List<Person> list = new List<Person>();
list = (from p in db.Persons where p.YearsOfWorkExperience > 5 select p).ToList();
return PartialView("_SearchSkills", list);
}
now i get returned the html code in the ajax call. i just need to know how i can render the table again with the new data because i really don't get how i can do that. I found some stuff on internet that says use $(MyPartialName).html(data) but that doesn't work for me so is there another way to do it or did i forget something(i did add the unobtrusive-ajax.js in the _Layout). Hope somebody can help me with this thank you very much in advance :D
Your jQuery selector is not valid. In your script tag change like following
$('#checkbox5yearsfilter').click(function () {
if ($('#checkbox5yearsfilter').is(':checked')) {
And replace this
<span>
#Html.Partial("_SearchSkills", ViewData.Model);
</span>
with this
<span id="_SearchSkills"></span>