Develop Reference

Ajax.BeginForm() Ajax Option Not Work in Razor View

Hi friend AjaxOption Not working in my Razor View
#using (Ajax.BeginForm("TestAvanceSearchRequisition", "Requisition",
new AjaxOptions
{
HttpMethod = "POST",
Confirm = "Do u Want to save",
UpdateTargetId = "divResponse"
}))
{
<table>
<tr>
<td class="lebelTD">
Date From:
</td>
<td class="fieldTD">
#Html.TextBox("requisition_from", "",
new
{
#class = "InputText",
onclick = "javascript:NewCssCal ('requisition_from','ddMMMyyyy','arrow','','','','')",
#style = "border-left:2px solid #FF3C3C;"
})
</td>
</tr>
<tr>
<td class="lebelTD">
Date To:
</td>
<td class="fieldTD">
#Html.TextBox("requisition_end_date", "",
new
{
#class = "InputText",
onclick = "javascript:NewCssCal ('requisition_end_date','ddMMMyyyy','arrow','','','','')",
#style = "border-left:2px solid #FF3C3C;"
})
</td>
</tr>
</table>
<table>
<tr>
<td align="right">
<input type="submit" class="smallbtn" />
</td>
</tr>
</table>
<div id="divResponse">
<table>
<tr>
<td class="lebelTD">Sales Total Amount</td>
<td class="fieldTD">
#Html.TextBox("Salesamt", #TempData["TotalSalesAmout"], new { #class = "InputText" })
</td>
</tr>
</table>
</div>
}
Not any Ajax Option not working. Like confirm box, Update Traget Id.. I had add all reference of Ajax.
Why not Ajax Option Not working. On button click go to Post method and get the result but no confirm box work and load full form.

Cannot get text from td (ASP.NET MVC )

I have table that display via Razor syntax
Here is code
#foreach (var item in Model)
{
<tr>
<td class="point">
#(rowNo += 1)
</td>
<td class="title">
#Html.DisplayFor(modelItem => item.Date_of_Birthday)
</td>
<td id="name" class="title">
#Html.DisplayFor(modelItem => item.Name)
</td>
<td class="title"></td>
<td class="title"></td>
<td class="title"></td>
<td style="text-align: end;">
<img id="delete_pt" src="~/images/icons8-Delete-50.png"/>
<img src="~/images/doc-50.png"/>
</td>
</tr>
}
I try to get value of
<td id="name" class="title">
#Html.DisplayFor(modelItem => item.Name)
</td>
Via JS
Here is code
<script>
$(document).on('click', '#delete_pt', function () {
var title = $(this).find('#name').html();
console.log(title);
});
But when I click I'm not get value it's empty. Where is my error?

Your element with id="delete_pt" is an <img> and it does not contain any child elements. You need to find the parent <tr> element and then find the <td id="name"> element.
$(document).on('click', '#delete_pt', function () {
var title = $(this).closest('tr').find('#name').html();
console.log(title);
});
However you loop is generating duplicate id attributes which is invalid html. You need to replace your id attributes with class names, for example
<td class="name title">
#Html.DisplayFor(modelItem => item.Name)
</td>
....
<img class="delete_pt" src="~/images/icons8-Delete-50.png" />
and then use
$(document).on('click', '.delete_pt', function () {
var title = $(this).closest('tr').find('.name').html();
console.log(title);
});

i believe you need to change it to
#Html.DisplayFor(item=> item.Date_of_Birthday)

You can simply pass the item.name as a value to the js
<img id="delete_pt" src="~/images/icons8-Delete-50.png" onclick="deletePT(#item.Name)"/>
and add a function to yout JS:
(remove the onclick event)
function deletePT(itemname){
console.log(itemname);
}
Your code generate a ID value to more then one element in the HTML - that is not good. but this is not the issue of the problem

store hidden field value and show them on next page in mvc

In JavaScript hidden field value is stored.
But when clicked on next page hidden field is null it doesn't have values from previous page.
Why is it not loading previous values in next page?
How to load previous value in hidden field??
function AddRemoveCustomer(id) {
//$(".checkBoxClass").click(function (e) {
alert('in main function');
alert(id);
var CustomerIDArray = [];
var hidCID = document.getElementById("hfCustomerID");
if (hidCID != null && hidCID != 'undefined') {
var CustID = hidCID.value;
CustomerIDArray = CustID.split("|");
var currentCheckboxValue = id;
var index = CustomerIDArray.indexOf(currentCheckboxValue);
alert('index value:' + index);
debugger;
if (index == 0) {
alert('if');
CustomerIDArray.push(currentCheckboxValue);
alert('pushed value:' + CustomerIDArray);
} else {
alert('else');
var a = CustomerIDArray.splice(index, 1);
alert("a" + a);
}
hidCID.value = CustomerIDArray.join("|");
alert('Final' + hidCID.value);
} else {
alert('undefined');
}
//});
}
<table id="tblEmailScheduler" class="table-bordered col-offset-12">
<thead>
<tr class="label-primary">
<th style="padding:5px 15px;">
First Name
</th>
<th style="padding:5px 15px;">
Last Name
</th>
<th style="padding:5px 15px;">
Email ID
</th>
<th style="padding:5px 15px;">
Customer Type
</th>
<th style="padding:5px 15px;">
Customer Designation #Html.DropDownList("CustomerDesignation", new SelectList(ViewBag.SelectAllCustomerDesignationDDL, "Value", "Text"), new { id = "CustomerDesignationDDL" , name = "CustomerDesignationDDL" })
</th>
<th style="padding:5px 15px;">
Select All
<div class="checkbox control-group">
<label><input type="checkbox" id="cbSelectAll" /></label>
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2">
EmailTemplate : #Html.DropDownList("EmailSubject", new SelectList(ViewBag.SelectAllEmailTemplateDDL, "Value", "Text"), new { id = "SelectAllEmailTemplateDDL" })
</th>
<th colspan="2">
Set Date And Time:
<input type="text" class="from-date-picker" readonly="readonly" />
</th>
<th colspan="2">
<input type="submit" value="Schedule" id="btnSubmit" class="btn btn-default" />
</th>
<td>
</td>
</tr>
</tfoot>
#foreach (var item in Model) {
<tr style="text-align:center">
<td id="tblFirstName">
#item.FirstName
</td>
<td id="tblLastName">
#item.LastName
</td>
<td id="tblEmailID">
#item.EmailID
</td>
<td id="tblCustomerType">
#item.CustomerType
</td>
<td id="tblCustomerDesignation">
#item.CustomerDesignation
</td>
<td>
<div class="checkbox control-group">
<label><input type="checkbox" id="#item.CustomerID" value="#item.CustomerID"
onclick="AddRemoveCustomer(#item.CustomerID)" class="checkBoxClass"/>
#*#Html.CheckBox("Select", new { id = "cbCustomer", item.CustomerID})*#</label>
</div>
</td>
</tr>
}
</table>
<input type="hidden" id="hfCustomerID" />

In looking at your code, I noticed an issue that may be causing you the problem you indicate:
var index = CustomerIDArray.indexOf(currentCheckboxValue);
you then use index to decide if the Id is in the array, by doing this:
if (index == 0) {
it should be
if (index == -1) {
as -1 indicated not found. With it as it is currently, it would hit this line:
var a = CustomerIDArray.splice(index, 1);
and try to splice a negative index, which goes backward from the end of the string, which would give unexpected results.

Your hidden hfCustomerID field is always rendered to the browser as an empty field, because you haven't bound it to anything in your Model.
I assume this table is inside a form which is being posted to your controller? If so, then you could add a new field to your Model, and then use #Html.HiddenFor to render a hidden input field which is bound to that item in your model.
Alternatively, it looks like this field is entirely calculated based on the ticked checkboxes? In which case, update your view to set the value of the hidden field (this will duplicate some logic from your JavaScript though).

how to render radio button dynamically in a table?

I am new in mvc5. I am facing a problem is that i want to render some row in a table with a radio button in every row. If i clicked or checked the radio button then it will show a picture in that row. Now the problem is that, i am trying to test every row by clicking but the result is only one row showing alert and this is only first row. where is the problem i don't know? will you please help me to find out the problem?
#if (Model != null) {
foreach (var item in Model) {
<tr style="vertical-align:middle">
<td style="vertical-align:middle">
#Html.DisplayFor(modelItem => item.CandId)
</td>
<td style="vertical-align:middle">
#Html.DisplayFor(modelItem => item.CandName)
</td>
<td style="vertical-align:middle">
#Html.HiddenFor(modelItem => item.Position, new {id="ps" })
</td>
<td style="vertical-align:middle">
<img src="/Ballot/RetrieveImage/#item.id" alt="" height=50 width=50/>
#*#Html.DisplayFor(modelItem => item.cand_symbol)*#
</td>
<td style="vertical-align:middle; text-align:center;">
#Html.RadioButtonFor(modelItem => item.isCandidate, item.CandId, new { id="rd",name="rd"})
<img src="" height="50" width="50" id="picture" hidden />
</tr>
}
}
$("#rd").click(function () {
$('#picture').attr('src', '/Images/vt.png');
var ps = $('#ps').val();
alert(ps);
$(picture).show();
});

You are rendering multiple elements with same id which is the reason it is not working, it will always fire event for just first item it finds in the DOM with that id.
Change it to class and add click event on class selector:
#Html.HiddenFor(modelItem => item.Position, new {#class="ps" })
#Html.RadioButtonFor(modelItem => item.isCandidate, item.CandId, new { #class="rd",name="rd"})
<img src="" height="50" width="50" class="picture"/>
and in js:
$(".rd").click(function () {
var picture = $(this).closest("tr").find('.picture').attr('src', '/Images/vt.png');
var ps = $(this).closest("tr").find('.ps').val();
$(picture).show();
});

Access Property of a List Item Model from Javascript

I am using Javascript to edit the property of a row in a List of items and i am following a HTML view like this
ON edit button click i am showing a popup and on Save event of popup i want to set the properties of a selected row .
From html console i can see naming pattern is like name=[1].IsVerified [2].isVerified etc or in general [counter].Property But when i try to access element using JQUery i am not getting the element
#model IList<RoyaltyDb.Models.VerifyLicensorModel>
<table class="table">
<tr>
<th>
Licensor
</th>
<th>
Address
</th>
<th>
Status
</th>
<th>
Verify
</th>
</tr>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td>
#Html.HiddenFor(m => m[i].Licensor)
#Html.DisplayFor(m => m[i].Licensor)
</td>
<td>
#Html.TextAreaFor(m => m[i].Address)
</td>
<td>
#Html.LabelFor(m => m[i].IsVerified)
#Html.CheckBoxFor(m => m[i].IsVerified, new { #disabled = "disabled" })
<br />
#Html.HiddenFor(m => m[i].ActionId)
#Html.HiddenFor(m => m[i].ReferenceId)
</td>
<td>
<a onclick="SetProperties('#Model[i].Licensor')" class="btn">Verify</a>
</td>
</tr>
}
</table>
<!-- Modal HTML -->
<div id="VerifyLicensorModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Verify Licensor</h4>
<input type="hidden" id="targetPopup" />
</div>
<div class="modal-body" id="VerifyLicensorDetails">
</div>
<div class="modal-footer">
<a class="btn btn-primary" onclick="confirmLicensor()">Confirm</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
function SetProperties(name)
{
//Showing a POPUp Here on element VerifyLicensorModal
}
function confirmLicensor()
{
//Set the corresponding IsVerified checkbox to true
//Set values of ActionId and ReferenceId params in the hidden fields
//ActionId ReferenceId
}
So how can i set the value of a property field from javascript

Rather than polluting your markup with behavior, use Unobtrusive Javascript. Give you link a class name and add the value of the Licensor property as a data- attribute and move the 2 hidden inputs into the same table cell for easier selection
<td>
#Html.HiddenFor(m => m[i].ActionId)
#Html.HiddenFor(m => m[i].ReferenceId)
Verify
</td>
var currentCell;
$('.verify').click(function() {
currentCell = $(this).closest('td');
licensor = $(this).data('licensor');
// get your partial view and display the popup
});
Similarly give the confirm button a unique id attribute
$('#confirm').click(function() {
var inputs = currentCell.children('input');
inputs.eq(0).val(....); // set the value of ActionId
inputs.eq(1).val(....); // set the value of ReferenceId
});
Note that you question indicates Set the corresponding IsVerified checkbox to true. Because this is in the previous cell, you could do it using
currentCell.prev('td').find('input[type="checkbox"]').prop(checked, true);
however you have disabled the checkbox using new { #disabled = "disabled" } which means it wont post back, but the associated hidden input generated by CheckBoxFor() will, meaning that irrespective of checking it, you will always post back false
If the checkbox is intended to give a visual representation that verification has been completed, then a better approach would be to include a hidden input bound to IsVerified and an unbound checkbox.
<td>
<input type="checkbox" disabled="disabled" />
</td>
<td>
#Html.HiddenFor(m => m[i].ActionId)
#Html.HiddenFor(m => m[i].ReferenceId)
#Html.HiddenFor(m => m[i].IsVerified)
Verify
</td>
Then you can 'check' the checkbox as noted above and include
inputs.eq(2).val("True"); // set the value of IsVerified
in the script
You may also want to consider deleting the 'Verify' link from the DOM once you close the popup (assuming you don't want to verify it again
currentCell.children('a').remove();

<tbody>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td>
<input typye="hidden" class="index" value="#i"/>
#Html.HiddenFor(m => m[i].Licensor)
#Html.DisplayFor(m => m[i].Licensor ,{#id="liecenor-#i"})
</td>
</tr>
}
</tbody>
</table>
<script>
$(".table > tbody> tr").each(function () {
var index=$(this).find('.index').val();
var $id="#licensor-"+index;
alert($($id).val());
}
</script>