I have this code in an MVC project.
I have a note field inside every row in a simple table
like so:
$(document).ready(function() {
//POPOVER NOTE
$("td").children("#po1").popover({
html: true,
title: 'Note',
content: function() {
return $("td").children(".popoverContent").html();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<a href="#" id="po1" class="btn btn-info" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true">
<span class="glyphicon glyphicon-paperclip"></span>
</a>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
#Html.DisplayFor(modelItem => item.Note, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
</div>
</div>
</td>
The code above returns the content of first row in every case.
What am I wrong ?
Related
I have order with several order items and I use partial view to load order items. I want to validate OrderLineItemEntity's ProductCode but it does not work. Every other property validation works which is not in partial view. How can I force to validate partial view too?
Order View:
<div id="orderLineItemsContainer" class="form-group">
#Html.EditorFor(model => model.OrderLineItems)
</div>
OrderLineItems View:
#model SalesManagementSystem.Models.OrderEntity
#Html.EditorFor(model => model.OrderLineItems)
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
OrderLineItem View:
#model SalesManagementSystem.Models.OrderLineItemEntity
<div class="form-inline col-md-12" style="margin-bottom: 5px">
<div class="form-group col-md-6">
#Html.LabelFor(model => model.ProductCode, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
#Html.EditorFor(model => model.ProductCode, new { htmlAttributes = new { #class = "form-control", id = "ProductCode" } })
#Html.ValidationMessageFor(model => model.ProductCode, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group col-md-6">
#Html.LabelFor(model => model.Quantity, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { #class = "form-control", id = "ProductQuantity" } })
#Html.ValidationMessageFor(model => model.Quantity, "", new { #class = "text-danger" })
</div>
</div>
#if (Model != null)
{
<a onclick="deleteRow('#Model.ProductCode')">Delete</a>
}
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
ValidationController:
public JsonResult IsProductCodeValid(int ProductCode){...}
This is how I update my order items when new item is added. I think I need to add something here.
$("#btnAdd").click(function () {
var order = {
'Id': $("#Id").val(),
'Date': $("#Date").val(),
'ConsultantId': $("#ConsultantId").val(),
'OrderLineItems': getOrderLineItems()
};
$.ajax({
url: '#Url.Action("AddOrderItem", "Orders")',
type: "POST",
data: {
order: order
},
success: function (partialView) {
$("#orderLineItemsContainer").html(partialView);
},
failure: function (response) {
alert("failed");
}
});
});
Update:
I tried adding
jQuery.validator.unobtrusive.parse("#ProductCode");
And
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
Still not working
you can add a name and id (like ProductForm) property to your partial view form
after that, in cshtml file's script section
you can add a screen control method like this
function ScreenControl() {
if ($('#ProductForm')[0].checkValidity()) {
// do what do you want
} else {
$("#btnSave2").click();
}
}
and you should add 2 buttons to bottom of the form, one of them should be hidden like
<label class="col-md-1 control-label"></label>
<div class="col-md-1">
<button class="btn btn-sm btn-primary" style="float: right" type="button" id="btnSave" name="btnSave" value="Save" onclick="ScreenControl()">
<i class="fa fa-save"></i>
Save
</button>
</div>
<button class="btn btn-sm btn-primary" type="submit" id="btnSave2" name="btnSave2" value="Save" style="display: none">
<i class="fa fa-save"></i> Save
</button>
In my razor view, in the "Panel area - to hold the comment button", I am trying to referencing the view models property BlogPublishedByBlogId.BlogId but I get - "the name BlogPublishedByBlogId does not exist in the current context".
However, I am able to reference the other properties fine using Lamda: model => model.BlogPublishedByBlogId.CreatedDateTime
How do I reference the 'blogId' in the "Panel area - to hold the comment button" area?
#model GbngWebClient.Models.BlogPublishedByBlogIdVM
<h2 class="page-header"><span class="blogtitle">#Session["BlogTitle"]</span></h2>
#{
Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
#if (Model != null)
{
<div class="panel panel-default toppanel">
<div class="panel-body">
<div class="row">
<div class="col-md-2">
#Html.LabelFor(model => model.BlogPublishedByBlogId.CreatedDateTime)
#Html.TextBoxFor(model => model.BlogPublishedByBlogId.CreatedDateTime, new { #class = "form-control", #disabled = "disabled" })
</div>
<div class="col-md-2">
#Html.LabelFor(model => model.BlogPublishedByBlogId.ModifiedDateTime)
#Html.TextBoxFor(model => model.BlogPublishedByBlogId.ModifiedDateTime, new { #class = "form-control", #disabled = "disabled" })
</div>
</div>
<br />
<div class="row">
<div>
#Html.TextAreaFor(model => model.BlogPublishedByBlogId.BlogContent, new { #class = "form-control blogContent", #disabled = "disabled" })
</div>
</div>
</div>
#* Panel area - to hold the comment button. *#
<div class="panel-footer">
<button type="button" class="btn btn-default Comment" data-id="BlogPublishedByBlogId.BlogId" value="Comment">
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Get Comment(s)
</button>
</div>
<div id="#string.Format("{0}_{1}","commentsBlock", BlogPublishedByBlogId.BlogId)" style="border: 1px solid #f1eaea; background-color: #eaf2ff;">
<div class="AddCommentArea" style="margin-left: 30%; margin-bottom: 5px; margin-top: 8px;">
<input type="text" id="#string.Format("{0}_{1}", "comment", BlogPublishedByBlogId.BlogId)" class="form-control" placeholder="Add a Comment about the blog..." style="display: inline;" />
<button type="button" class="btn btn-default addComment" data-id="BlogPublishedByBlogId.BlogId"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
</div>
</div>
</div>
}
The view model:
namespace GbngWebClient.Models
{
public class BlogPublishedByBlogIdVM
{
public BlogPublishedByBlogIdVM()
{
this.BlogPublishedByBlogId = new BlogPublishedByBlogId();
}
public BlogPublishedByBlogId BlogPublishedByBlogId { get; set; }
}
}
I added #Model to the front of:
BlogPublishedByBlogId.BlogId.
I have a modal that appears when a user clicks a delete link on my index page but this is only showing the first record regardless of what row is clicked, i think i'm missing something in the "#data_target" part of my code but unsure.
Code is as follows:
#foreach (var item in Model)
{
using (Html.BeginForm("Delete", "ModelName", new { id = item.ID }))
{
var myModal = "myModal" + item.ID;
<tr>
<td>
#Html.DisplayFor(modelItem => item.Account_Name)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
#Html.ActionLink("Details", "Details", new { id = item.ID }) |
#Html.ActionLink("Delete", "Index", new { id = item.ID }, new { #class = "DeleteRecord", #data_target = "myModal" })
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-keyboard="false" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<center>
<h4 class="modal-title" id="myModalLabel">Delete Record</h4>
</center>
</div>
<div class="modal-body">
<center>
Record ID :<span><b>#item.ID</b></span><br />
Account Name : <span><b>#item.Account_Name</b></span><br />
</center>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
<input type="submit" value="Delete" class="btn btn-danger" />
</center>
</div>
</div>
</div>
</div>
</td>
</tr>
}
}
and then the function is
<script>
$(function () {
$('.DeleteRecord').on("click", function (e) {
e.preventDefault();
//perform the url load then
$('#myModal').modal({
keyboard: true
}, 'show');
return false;
})
})
Update you function as below. $(this).closest('td') will select parent td element of clicked .DeleteRecord button. Then it will find #myModal inside that td.
$(document).ready(function () {
$('.DeleteRecord').on("click", function (e) {
e.preventDefault();
//perform the url load then
$(this).closest('td').find('#myModal').modal({
keyboard: true
}, 'show');
return false;
});
});
In your code $('#myModal').modal(...);, this has used id selector which will always give you first element which has myModel id.
It should be data_targer="#myModal"
I have a table showing the information of the users, with an edit button for each one.
I want to show a modal form with the details for the user I want to edit, but I don't know how to get the details from the list, and passing them to the modal as a model.
Here is my View:
#model MyApp.Models.User
#{
ViewBag.Title = "Users";
var roles = new List<string> { "Manager", "Admin" };
var userRoles = (List<string>)ViewData["userRoles"];
}
<h2>#ViewBag.Title</h2>
#if (userRoles.Any(u => roles.Contains(u)))
{
using (Html.BeginForm("Update", "Admin", FormMethod.Post, new { id = "update-form", value = "" }))
{
<div class="modal fade" id="user-editor" >
<div class="modal-header">
<a class="close" data-dismiss="modal"><h3>×</h3></a>
<h3 id="modal-title">Edit User</h3>
</div>
<div class="modal-body">
<div class="form-group">
#Html.Label("Name", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Name, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.Label("Age", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Age, new { #class = "form-control" })
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal">Close</a>
<input type="submit" class="btn btn-primary" value="Save Changes" />
</div>
</div>
}
}
<table class="table-bordered table-hover" id="tbusers">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
#if (userRoles.Any(u => roles.Contains(u)))
{
<th>Edit</th>
}
</tr>
</thead>
<tbody>
#foreach (var u in users)
{
<tr id="#u.Id">
<td>#u.Name</td>
<td>#u.Age</td>
#if (userRoles.Any(u => roles.Contains(u)))
{
<td><a type="button" class="btn edit-btn" href="#user-editor" data-toggle="modal">Edit</a></td>
}
</tr>
}
</tbody>
</table>
I've created a testing sample which will help you understand how can you achieve this.
Index.cshtml which will show a list of employees
#model IEnumerable<MvcApplication1.Models.Employee>
#using MvcApplication1.Models;
<h2>Index</h2>
<table>
#foreach (Employee item in Model)
{
<tr>
<td>#Html.ActionLink(#item.EmployeeName, "Name", new { id = item.ID })</td>
<td>
<button type="button" data-id='#item.ID' class="anchorDetail btn btn-info btn-sm" data-toggle="modal"
data-target="#myModal">
Open Large Modal</button></td>
</tr>
}
</table>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
At the same page, reference the following scripts
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
JQuery AJAX call for getting/setting the data of individual employee from ActionMethod at the same page
<script>
$(document).ready(function () {
var TeamDetailPostBackURL = '/Employee/Details';
$(document).on('click', '.anchorDetail', function () {
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
url: TeamDetailPostBackURL,
contentType: "application/json; charset=utf-8",
data: { "Id": id },
datatype: "json",
success: function (data) {
debugger;
$('.modal-body').html(data);
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function () {
alert("Dynamic content load failed.");
}
});
});
$("#closbtn").click(function () {
$('#myModal').modal('hide');
});
});
Now Create a class of Employee(because i'm not using EF)
public class Employee
{
public int ID { get; set; }
public string EmployeeName { get; set; }
}
Create controller named Employee and 2 ActionMethods like these:
public ActionResult Index()
{
return View(emp);//sends a List of employees to Index View
}
public ActionResult Details(int Id)
{
return PartialView("Details",
emp.Where(x=>x.ID==Convert.ToInt32(Id)).FirstOrDefault());
}
I'm returning PartialView because I need to load a page within a page.
Details.cshtml
#model MvcApplication1.Models.Employee
<fieldset>
<legend>Employee</legend>
<div class="display-label">
#Html.DisplayNameFor(model => model.ID)
</div>
<div class="display-field">
#Html.DisplayFor(model => model.ID)
</div>
<div class="display-label">
#Html.DisplayNameFor(model => model.EmployeeName)
</div>
<div class="display-field">
#Html.DisplayFor(model => model.EmployeeName)
</div>
</fieldset>
<p>#Html.ActionLink("Back to List", "Index")</p>
When you execute and visit the Index page of Employee, you'll see screen like this:
And the Modal Dialog with results will be shown like this:
Note: You need to add reference of jquery and Bootstrap and you can further design/customize it according to your needs
Hope it helps!
I've been stuck almost two days now and still couldn't find a solution.
I have a WebGrid in a partial view, and I'm loading it inside the main view which has 4 search fields.
I'm using Request.IsAjaxRequest() to identify which view has to be loaded.
If it's an Ajax call I return the Partial View else the Main View. If I return the "Main View" the Dropdownlist value get reset as it refresh. I want to keep the Dropdownlist value selected by the user after the results has been loaded.
Here's my Main View,
<div class="row">
#if (Model != null)
{
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by State", new { #class = "form-font-size label-margin-top" })
#Html.DropDownList("stateList", (SelectList)ViewBag.StatesList, "ALL", new { #class = "form-control", #id = "ddlState" })
#*<select class="form-control" id="ddlState">
<option value="0">ALL</option>(SelectList)ViewBag.StatesList
<option value="1">NT</option>
<option value="2">WA</option>
<option value="3">QLD</option>
</select>*#
</div>
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by Job Id", new { #class = "form-font-size label-margin-top" })
<input type="text" value="#ViewBag.JobId" id="txtName" class="form-control uppercase" />
#*<div class="col-sm-7 col-md-6">
<input type="text" id="txtName" class="form-control uppercase form-control-search-panel-textbox-height" />
</div>*#
</div>
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by Client", new { #class = "form-font-size label-margin-top" })
<input type="text" value="#ViewBag.Client" id="txtClientName" class="form-control uppercase" />
#*<div class="col-sm-7 col-md-6">
<input type="text" id="txtClientName" class="form-control uppercase form-control-search-panel-textbox-height" />
</div>*#
</div>
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by Location", new { #class = "form-font-size label-margin-top" })
<input type="text" value="#ViewBag.Location" id="txtLocation" class="form-control uppercase" />
#*<div class="col-sm-7 col-md-6">
<input type="text" id="txtClientName" class="form-control uppercase form-control-search-panel-textbox-height" />
</div>*#
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8 increase-bottom-padding">
<span class="glyphicon glyphicon-search glyphicon-margin-right"></span>All Jobs
<span class="glyphicon glyphicon-search glyphicon-margin-right"></span>My Jobs
</div>
<div id="grid">
#Html.Partial("_JobInstructionWebGridPartial")
</div>
}
else
{
<div class="col-xs-12 col-sm-8 increase-bottom-padding-job remove-left-right-padding">
<span class="glyphicon glyphicon-search glyphicon-margin-right"></span>All Jobs
</div>
#:<div class="col-md-12 alert alert-danger"><strong>You don't have any jobs, If you want to search any Job please click on "'All Jobs'" ..</strong></div>
}
</div>
Here's my Partial View
#model IEnumerable<SurveyManagement.Models.Job.ViewModel_JobInstruction_WebGrid>
#{
if (Model != null)
{
var grid = new WebGrid(source: Model, canPage: true, canSort: false, rowsPerPage: 10, ajaxUpdateContainerId: "jobgridcontent");
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="table-responsive">
<div class="table" id="tbljobbook">
#grid.GetHtml(tableStyle: "table table-striped table-bordered table-hover",
headerStyle: "jobinstruction-webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
columns:
grid.Columns(
grid.Column("JobId", header: "Job Id", style: "jobinstruction-row-style col-md-1", format: #<text><label class="lblJobId">#item.JobId</label> </text>),
grid.Column("ClientName", header: "Client Name", style: "col-md-2 job-webgrid-column-max-width uppercase"),
grid.Column("JobLocation", header: "Job Location", style: "col-md-2 job-webgrid-column-max-width"),
grid.Column("JobDescription", header: "Job Description", style: "col-md-2 job-webgrid-column-max-width"),
grid.Column("JobStatus", header: "Job Status", style: "jobinstruction-row-style col-md-1 uppercase"),
grid.Column("Action", format: #<text>
<button type="button" class="edit-user btn btn-info btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="Edit Job"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-swr btn btn-tumblr btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="SWR List"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-swr-new btn btn-facebook btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="New SWR"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-view btn btn-primary btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="Field Entry List"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-create btn btn-warning btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="New Field Entry"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-admin btn btn-danger btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="Admin"><i class="fa fa-list"></i></button></text>, style: "col-md-4 jobinstruction-row-style", canSort: false)
))
</div>
</div>
</div>
}
Calling the Controller Action on Dropdownlist change event,
$(document).ready(function () {
$('#ddlState').change(function () {
$.ajax({
type: "GET",
url: '#Url.Action("SearchJobDetails")',
data: { jobId: $('#txtName').val(), client: $('#txtClientName').val(), location: $('#txtLocation').val(), state: $("#ddlState option:selected").text() },
success: function (data) {
$('#grid').html(data);
}
});
});
});
Here is my Controller Action,
public ActionResult SearchJobDetails(string jobId = null, string client = null, string location = null, string state = null)
{
try
{
ViewBag.IsRecordsSave = false;
ViewBag.sectionid = 1;
ViewBag.Location = location;
ViewBag.Client = client;
ViewBag.JobId = jobId;
List<States> StateList = Enum.GetValues(typeof(States)).Cast<States>().ToList();
ViewBag.StatesList = new SelectList(StateList);
ViewBag.SelectedState = state;
if (Request.IsAjaxRequest())
{
return PartialView("_JobInstructionWebGridPartial", GetJobDetails(jobId, client, 0, location, state));
}
else
{
return View("JobInstructionsDetails", GetJobDetails(jobId, client, 0, location, state));
}
}
}
As you can see in the above controller, ViewBag.StatesList is where I assign the States in my Enum. If I return the View (else part), the dropdownlist value get reset. I managed to keep the input text box values by putting value="#ViewBag.Location" so it set the values back from ViewBag. How do I do that for the Dropdownlist? Please help.
You need to use Html.DropdownlistFor Just modify the code as shown in the example below.where m.jobID is the selected value. To keep the value after postback its wise to use Model always.
#Html.DropDownListFor(m => m.jobID, new SelectList(Model.Clients, "ID", "ClientName"),new { #class = "form-control" })