I've looked around, but can't find anything solving my problem with this (common?) issue.
My problem is that the whole site is refreshed instead of just the div tag. It have worked once, but after an update, not anymore...
AddMember.cshtml
#using DBSUSite.ViewModels
#model CommitteeAddMemberModel
<script src='#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")' type="text/javascript"></script>
<h1>
Tilføj medlem</h1>
<p>
Her kan du søge efter brugere og tilføje dem til bestyrelsen eller udvalget.</p>
#using (Ajax.BeginForm("SearchMembers", new AjaxOptions { UpdateTargetId = "searchUsersList", HttpMethod = "POST" }))
{
#Html.HiddenFor(model => model.CommitteeId)
<label for="str">
Søg efter:
</label>
<input id="str" name="str" value="" />
<input type="submit" value="Søg" />
}
<div id="searchUsersList">
#{ Html.RenderPartial("_SearchUserPartial", Model); }
</div>
Action
[Authorize]
[HttpPost]
public ActionResult SearchMembers(int committeeId, string str)
{
//TODO: Put into User model!
var db = new DBEntities();
// Removed lots of code.
var model = new CommitteeAddMemberModel { CommitteeId = committeeId, Users = users.Values.AsEnumerable() };
return PartialView("_SearchUserPartial", model);
}
Partial View
#using DBSUSite.Models
#using DBSUSite.ViewModels
#model CommitteeAddMemberModel
<table>
<thead>
<tr>
<th>
Navn
</th>
<th>Tilføj</th>
</tr>
</thead>
<tbody>
#foreach (User user in Model.Users)
{
<tr>
<td>
#Html.DisplayFor(q => user.FirstName) #Html.DisplayFor(q => user.Surname)
</td>
<td>
#Html.ActionLink("Tilføj", "SaveMember", "Committee", new { committeeId = Model.CommitteeId, userId = user.UserID }, null)
</td>
</tr>
}
</tbody>
</table>
Thanks in advance!
You need to make sure that you included all these libraries:
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
Related
Just wanted to ask if there's something I missed here.
I have two tables that I joined together in my controller
using .NET MVC btw
anyway, here's my controller:
namespace Review.Controllers
{
public class ReviewController : Controller
{
ReviewContext db = new ReviewContext();
ReviewItemsContext db2 = new ReviewItemsContext();
MainDataModel db3 = new MainDataModel();
List<UAR_Review> uar_review = new List<UAR_Review>();
List<UAR_ReviewItems> uar_reviewitems = new List<UAR_ReviewItems>();
public ActionResult Index(int? page) {
ViewBag.AccList = (from r in db2.UAR_ReviewItems
select r.Account).Distinct();
/*var entities = from s in db2.UAR_ReviewItems
orderby s.Account
select s;*/
var entities = from s in uar_review
join st in uar_reviewitems on s.ID equals st.ReviewID into st2
from st in st2.DefaultIfEmpty()
select new MainDataModel { UAR_Review = s, UAR_ReviewItems = st };
int pageSize = 15;
int pageNumber = (page ?? 1);
return View(entities.ToPagedList(pageNumber, pageSize));
}
}
}
and here's my view:
#model PagedList.IPagedList<Review.Models.MainDataModel>
#using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#{
ViewBag.Title = "Index";
}
#using (Html.BeginForm("Index", "Review", FormMethod.Get))
{
<h2>Index</h2>
#section NavBar{
<h3>Period: 2 of 2018</h3>
#Html.DropDownList("userAccount", new SelectList(ViewBag.AccList), "Select Account to Filter")
<input type="submit" value="Search" />
}
#section MiddleSection{
<table class="table">
<tr>
<th>
<span class="arrow-link contrast-large light-blue">#Html.DisplayName("Name")</span>
</th>
<th>
<span class="arrow-link contrast-large light-blue">#Html.DisplayName("Role")</span>
</th>
<th>
<span class="arrow-link contrast-large light-blue">#Html.DisplayName("Action")</span>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<span class="font-gotham-narrow">#item.UAR_Review.DisplayName</span>
</td>
<td>
<span class="font-gotham-narrow">#item.UAR_ReviewItems.Role</span>
</td>
<td>
#Html.HiddenFor(modelItem => item.UAR_ReviewItems.Response)
<span class="font-gotham-narrow">
#Html.RadioButton("Response", "Retain")#Html.Label("Retain")
</span>
<span class="font-gotham-narrow">
#Html.RadioButton("Response", "Remove")#Html.Label("Remove")
</span>
</td>
</tr>
}
</table>
<br />
Page #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount
#Html.PagedListPager(Model, page => Url.Action("Index",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
}
}
}
The problem is, when I run it there is nothing being displayed in the Site.here's the page.
I just wanted to ask if there's anything I missed.
Also, please disregard the dropdownlist on the left side, I've been planning to use it to sort the shown elements in the page by AccountType(This is stored in my UAR_ReviewItems table). For now, I'm just trying to figure out what's wrong here and why there are no elements being displayed.
Your screen grab does say the PageCount is 0.
Your Model in empty. Check your queries.
im using PagedList with ajax. everything work fine. but the only problem is that the page links are not getting update as i click on them.
this is partial view containing the list
#model IEnumerable<UniProject.Models.Short_Code>
<table class="table table-condensed table-bordered table-hover table-striped">
<tr>
<th>
Shortcode
</th>
<th>
Service
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ServiceCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.Service)
</td>
</tr>
}
</table>
this is my view
#model PagedList.IPagedList<UniProject.Models.Short_Code>
#using PagedList.Mvc
<link type="text/css" rel="stylesheet" href="~/Content/PagedList.css" />
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<div class="col-lg-8">
<div id="tableDiv">
#Html.Partial("_shortcode_table" , Model)
</div>
<div id="myPager">
#Html.PagedListPager(
Model,
page => Url.Action(
"Index",
new
{
page = page
}
)
)
</div>
</div>
<script>
$(function () {
$('#myPager').on('click', 'a', function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
success: function (result) {
$('#tableDiv').html(result);
}
});
return false;
});
});
</script>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
please help with this issue that where am i doing wrong. any help would be welcome . thanks
i am working on an application. i am using two partial view in a single view. one of them is a create form for shortcode and the other one lists the shortcodes having a pagination.
this is my create form which is partial view
#model UniProject.Models.Short_Code
<div id="formDiv">
#using (Ajax.BeginForm("Create", "Service", new AjaxOptions { HttpMethod = "post" , UpdateTargetId = "formDiv" }))
{
<table>
<tr>
<td>#Html.LabelFor(model => model.ServiceCode)</td>
<td>#Html.TextBoxFor(model => model.ServiceCode , new { #class = "form-control input-sm"})</td>
</tr>
<tr>
<td></td>
<td>#Html.ValidationMessageFor(model => model.ServiceCode , "", new { #class = "text-danger"})</td>
</tr>
<tr>
<td>#Html.LabelFor(model => model.Service)</td>
<td>
#Html.DropDownList("Service" ,new List<SelectListItem> {
new SelectListItem { Text = "Select" , Value = ""},
new SelectListItem { Text = "Package" , Value = "Package"},
new SelectListItem { Text = "Per-SMS" , Value = "Per-SMS"},
new SelectListItem { Text = "Barcode" , Value = "Barcode"}
}, new { #class = "form-control input-sm" })
</td>
</tr>
<tr>
<td></td>
<td>#Html.ValidationMessageFor(model => model.Service , "" , new { #class = "text-danger"})</td>
</tr>
<tr>
<td><input type="submit" value="Submit" class="btn btn-default btn-sm"/></td>
<td>#ViewBag.Record</td>
</tr>
</table>
}
this is my list which is also a partial view
#model IEnumerable<UniProject.Models.Short_Code>
<table class="table table-condensed table-bordered table-hover table-striped">
<tr>
<th>
Shortcode
</th>
<th>
Service
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ServiceCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.Service)
</td>
</tr>
}
this is index view
#model PagedList.IPagedList<UniProject.Models.Short_Code>
#using PagedList.Mvc
<link type="text/css" rel="stylesheet" href="~/Content/PagedList.css" />
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>Service Management</h3>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"> </script>
<div class="col-lg-4">
#Html.Partial("_shortcode_form")
</div>
<div class="col-lg-8">
#Html.Partial("_shortcode_table")
</div>
<div id="pager">
#Html.PagedListPager(
Model ,
page => Url.Action(
"Index" ,
new {
page = page
}
)
)
</div>
<script>
$(function () {
$("#pager").on('click', 'a', function () {
$.ajax({
url: this.href,
type: 'GET',
cashe: false,
success: function (respons) {
$('#table').html(respond);
}
})
return false;
})
});
</script>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
this is controller
public ActionResult Index(int? page)
{
var codes = db.Codes.AsQueryable();
codes = codes.OrderBy(c => c.Id);
if (Request.IsAjaxRequest())
{
return PartialView("_shortcode_table", codes.ToPagedList(pageNumber: page ?? 1, pageSize: 2));
}
return View(codes.ToPagedList(pageNumber: page ?? 1, pageSize: 2));
}
the problem is that when i pass this
codes.ToPagedList(pageNumber: page ?? 1, pageSize: 2)
to the view, this error generates
The model item passed into the dictionary is of type
'PagedList.PagedList`1[UniProject.Models.Short_Code]', but this
dictionary requires a model item of type
'UniProject.Models.Short_Code'.
please help how can is solve this issue. any help or assist would be welcome.
I have two controllers, both are having view.
control#1->view#1
control#2->view#2
on controller#1->view#1 I have data displayed in tabular format. in that data table, one column is hyperlink, when i click on that I want to pop up Bootstrap modal dialog. My retirement is Modal dialog should call action method of control#2 and display view#2 in modal dialog.
view#1:
#model xxx
<table id="myTable" class="table table-bordered">
<thead>
....
</thead>
<tbody>
#foreach (xx item in Model.xxx)
{
....
<td>#Html.ActionLink(item.Value.ToString(), "Display", "Controller#2", new { para1 = item.val1, para2 = item.val2}, null)</td>
}
#Html.ActionLink() is working fine it invokes Display() method of Controller#2 and eventually displays view#2. But now the requirement is view#2 should be popup modal dialog box.
FYI: both the views are using common _Layout.cshtml file.
Please help me doing this.
I've created a complete solution for you using #Ajax.ActionLink().To use Ajax.ActionLink it's very important that you add a reference to jquery.unobtrusive-ajax.min.js.In total you should have the following references in this order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
var p1 = new Product { ID = 1, Description = "Product 1" };
var p2 = new Product { ID = 2, Description = "Product 2" };
return View(new List<Product> { p1, p2 });
}
public PartialViewResult GetDetails(string description)
{
return PartialView("_GetDetails", description);
}
}
_GetDetails.cshtml partial view:
<div id="myModal" 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" id="myModalLabel">Modal Header</h4>
</div>
<div class="modal-body">
<h3>#Model</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Main view:
#model IEnumerable<MVC_Master_Pages.Models.Product>
#{
ViewBag.Title = "Home";
Layout = null;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
function Done() {
$('#myModal').modal('show');
}
</script>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Details</th>
</tr>
</thead>
<tbody>
#foreach (var product in Model)
{
<tr>
<td>#product.ID</td>
<td>#product.Description</td>
<td>
#Ajax.ActionLink("Details",
"GetDetails",
new { description = product.Description },
new AjaxOptions
{
UpdateTargetId = "details",
InsertionMode = InsertionMode.Replace,
OnSuccess = "Done()"
})
</td>
</tr>
}
</tbody>
</table>
<div id="details">
</div>
Output:
The second view can't be a complete view with layout. It should be a partial view and called by ajax. Check this answer to learn how to implement it.
I have a Web App written in MVC5 which passes a List of an Object(which contains many items) to a Page and renders successfully. I have a button on the form that forces a Post back. When I click the button the model appears to re-initialise the List of Objects, rather than return what was is on the Page.
I have read various posts on SO that cover similar issues that have made many suggestion like ensuring every item in the Object is on the form (at least hidden). Tried many of the options, but so far haven't been successful in solving my issue.
I decided to go back to basics on it, and created a very simple View Model with a List. This again renders ok, but when returned it as System.Collections.Generic.List.
View Model
public class TestVm
{
public List<string> CustomerNames { get; set; }
}
Controller
public ActionResult Index()
{
TestVm testmodel = new TestVm();
testmodel.CustomerNames = new List<string>();
testmodel.CustomerNames.Add("HELP");
testmodel.CustomerNames.Add("Its");
testmodel.CustomerNames.Add("Not");
testmodel.CustomerNames.Add("Working");
return View(testmodel);
}
[HttpPost]
public ActionResult Index(TestVm model)
{
// DO SOME WORK HERE WITH RETURNED model
return View(model);
}
View
#model WebApplication1.Models.TestVm
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View</title>
</head>
<body>
#using (Html.BeginForm("Index", "Test", Model, FormMethod.Post, new { #class = "form-horizontal" }))
{
<button name="submit" type="submit" value="Refresh" class="btn btn-sm btn-default pull-right">Refresh</button>
}
<div>
#if (Model.CustomerNames != null)
{
<table>
<thead>
<tr>
<td class="text-center">CustomerName</td>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.CustomerNames.Count(); i++)
{
<tr>
<td class="text-center">#Html.EditorFor(m => m.CustomerNames[i])</td>
</tr>
}
</tbody>
<tfoot>
</tfoot>
</table>
}
</div>
</body>
</html>
I thought creating a simple app like this would help me understand and solve my issue. But I can't work out why the model in the HttpPost contains "System.Collections.Generic.List", rather than the actual list of string that I would expect.
Initial Loadup
Page when loaded up the first time
After Refresh
Page after I clicked Refresh
You need to enclose every form control under Html.BeginForm brackets
#using (Html.BeginForm("Index", "Test", Model, FormMethod.Post, new { #class = "form-horizontal" }))
{
<button name="submit" type="submit" value="Refresh" class="btn btn-sm btn-default pull-right">Refresh</button>
<div>
#if (Model.CustomerNames != null)
{
<table>
<thead>
<tr>
<td class="text-center">CustomerName</td>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.CustomerNames.Count(); i++)
{
<tr>
<td class="text-center">#Html.EditorFor(m => m.CustomerNames[i])</td>
</tr>
}
</tbody>
<tfoot>
</tfoot>
</table>
}
</div>
}