I have 2 for loops in Razor syntax , I want to implement each one in a block , I added style block to second for loop but it appears inline with the first line of contents to the first loop
<div style="display:block;">
#foreach (var Item in Model)
{
<div class="col-sm-3">
<div class="content">
<p>#Item.Name</p>
</div>
</div>
}
<br>
</div>
// the page buttons appear next to #Item.Name (at the first line of the loop items) not after it
<div style="display:block;">
#for (int i = 1; i <= ViewBag.TotalPages; i++)
{
<button class="btn btn-info" type="button" id="addressSearch" onclick="location.href='#Url.Action("myaction","mycontroller", new { page = i } )'">#i</button>
}
</div>
this should work if it is not !important in external stylesheet
Related
So I have a list of web urls, all fetched from SQL and has an id, an address etc.
I list them in a table using the following:
<div>
<div class="well" margin-left:20px; margin-right:20px">
<h2 style="margin-left:20px; margin-top:10px">Control Added Links</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>
Link Address
</th>
<th>
Check Interval
</th>
<th>
Status
</th>
<th>
#
</th>
</tr>
</thead>
<tbody>
#foreach (var i in links)
{
<tr>
<td>
#i.Address
</td>
<td>
#i.Interval
</td>
<td>
#if (i.Status)
{ <text> ON </text>}
else
{ <text> OFF </text>}
</td>
<td>
<a href="~/Control/Delete/#i.Id">
✖
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
"links" here is a list of Link models:
#{
var links = (List<Link>)ViewData["LinkInfos"];
}
Right now, there is an X button you can click to delete a link from database, by using i.Id of the item 'i'. What I want to do is, ask for a confirmation with a modal, instead of directly deleting.
I delete the link with a function inside controller using the follownig:
public ActionResult Delete(int Id)
{
UserLinks links = new UserLinks();
links.delete(Id, User.Identity.Name);
return RedirectToAction("Index");
}
I changed this code, managed to pass the data from button to modal:
<a data-toggle="modal" data-id="#i.Id" data-request-url="#Url.Action("Delete", "Control")" title="Delete link" class="delete-Link btn btn-danger" href="#deleteLink">
✖
</a>
<div id="deleteLink" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Test</h4>
</div>
<div class="modal-body">
This will delete all records related to this link. Are you sure?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="deleteConfirm()">Yes</button>
<button class="btn btn-warning" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<script>
var myLinkId
var url
$(document).on("click", ".delete-Link", function () {
myLinkId = $(this).data('id');
url = $(this).data('request-url');
$(".modal-body #linkId").val(myLinkId);
// As pointed out in comments,
// it is superfluous to have to manually call the modal.
// $('#addBookDialog').modal('show');
});
function deleteConfirm()
{
debugger;
$.post(url), { Id: myLinkId };
}
</script>
But problem right now is passing this data from modal to controller. I wrote the "deleteConfirm" function but it doesn't seem to work, it doesn't go to ~/Control/Delete.
First part of my question is actually solved, I can pass id from button to modal, but I am not sure if it is properly solved so I am asking for that too, I currently pass the id using JavaScript but wonder if I can directly pass from button to modal itself.
I managed to fix my issue and properly delete by creating a modal for each item... which I assume is the sloppy way and can be a problem when I have like, let's say 100 links.
One solution I have in mind but don't know how to implement:
Have a "globalId" parameter inside view, when a button is clicked, i.Id is assigned to globalId, then open the modal, which has globalId as a parameter inside. Just like with , use inside modal, which changes by deletion button you click. But problem is, don't know how to create this global parameter and assign i.Id to it with click of a button.
A way I think I can implement my possible solution:
I want to have a variable in a view, let's say int globalId.
Let's say I press the delete button for id = 10, what I want to happen is simply have "global = id" so I want to assign 10 to number. If id of button is 12, I want "global = id" to happen again, this time to assign 12 to number.
So this way, modal will just use globalId, so I can make it have:
Yes
This way, there will only be one modal, every button will open the same modal and modal will use the same variable. Just value for globalId assigned to this modal will change with click of a button.
Question is, how can I create this local variable and how can I simply assign a new value to this local variable?
I have made some changes in your view which make this possible to work. I have added one hidden field in model and store the id on show event of the model. And on confirm id is get from this hidden field to construct the post url.
<a data-toggle="modal" data-id="#id" data-request-url="#Url.Action("Delete", "Home")" title="Delete link" class="delete-Link btn btn-danger" href="#deleteLink">
✖
</a>
<div id="deleteLink" class="modal fade" role="dialog">
<div class="modal-dialog">
<input type="hidden" id="linkId" />
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Test</h4>
</div>
<div class="modal-body">
This will delete all records related to this link. Are you sure?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="deleteConfirm()">Yes</button>
<button class="btn btn-warning" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<script>
$('#deleteLink').on('show.bs.modal', function (e) {
$("#linkId").val($(e.relatedTarget).data('id'));
});
function deleteConfirm()
{
var url = "#Url.Action("Delete", "Control")/" + $("#linkId").val();
$.post(url).success(function () {
location.href = "#Url.Action("Index", "Control")";
});
}
</script>
I'm using Bootstrap 3 on my site and I am using an MVC Razor For Each Loop to retrieve all of the child items on a blog homepage as follows:
#{int i = 0;}
#foreach (var subPage in Model.Content.AncestorOrSelf(2).Children.OrderBy("createDate descending"))
{
if (i % 2 == 0)
{
#:<div class="row row-eq-height">
}
<div class="col-sm-12 col-md-6">
</div><!-- col-sm-12 col-md-6 -->
if (i % 2 != 0)
{
#:</div><!-- row row-eq-height -->
}
i++;
}
This works fine when I have an even number of child pages however when I have an odd number of child pages, it's not hitting the if % 2 != 0 block which means the last row doesn't get closed which then breaks the flow of the remainder of the page.
I tried to fix this by adding the following if statement after the For Each loop hoping that if the final value of i was not 2, it would add a closing DIV tag as needed but instead that causes an inbalanced DIV tag error.
#if (i !% 2 == 0)
{
</div><!-- row row-eq-height -->
}
Anyone got any thoughts or ideas? If I have an even number, it works just fine and the page flow is as expected.
Your foreach loop needs to be inside a the containing element (row) and then withing the loop, close and start a new row for every second child element (column)
#{int i = 0;}
<div class="row row-eq-height">
#foreach (var subPage in Model.Content.AncestorOrSelf(2).Children.OrderBy("createDate descending"))
{
if (i > 0 && i % 2 == 0)
{
#:</div><div class="row row-eq-height">
}
<div class="col-sm-12 col-md-6">xxxxx</div>
i++;
}
</div>
The output, assuming you have 5 items in the collection, will be
<div class="row row-eq-height">
<div class="col-sm-12 col-md-6">xxxxx</div>
<div class="col-sm-12 col-md-6">xxxxx</div>
</div>
<div class="row row-eq-height">
<div class="col-sm-12 col-md-6">xxxxx</div>
<div class="col-sm-12 col-md-6">xxxxx</div>
</div>
<div class="row row-eq-height">
<div class="col-sm-12 col-md-6">xxxxx</div>
</div>
Ajax.BeginForm works first time, but calls method twice from second call.. I have referenced all the required scripts.
Firstly, In my main view, I have a common div for two partail views and I am loading respective views based on a radio button selection.
My Select Partial View
<div>
#using (Ajax.BeginForm("GetRandomThirdPartyList", "RandomList", new AjaxOptions { UpdateTargetId = "Contractors" }, new { id = "FORM" }))
{
<div id="Contractors">
<div id="ThirdParty">
<br />
<h3>Third Party Contractors</h3><hr />
<div>Enter High Risk Percentage: #(Html.Kendo().TextBoxFor<int?>(model => model.HighThirdPercent)
.HtmlAttributes(new { style = "width: 50px; height:25px" })
)
</div>
<input type="submit" value="Generate Report" class="k-button btn-primary" id="btn_thirdpaty" />
#* <b>#Html.DisplayFor(model => model.TotHighRisk) HighRisk Employees / #(Html.DisplayFor(model => model.TotLowRisk)) LowRisk Employees</b>*#
</div>
<br />
<div id="ThirdPartytab">
<div id="ReportForm" class="k-content">
<ul id="tabstrip2" class="nav nav-tabs" role="tablist">
<li class="active">HighRisk Third Party Contractors</li>
#* <li style="float:right"><img src="~/Images/icon_ssrs.png" title="Export to SSRS" /></li>*#
</ul>
#*Tab Content Containers*#
<div class="tab-content">
#if (Model.ThirdParty != null)
{
<div class="tab-pane fade in active" id="ThirdPartytab"> #Html.Partial("ThirdParty", Model) </div>
}
</div>
</div>
</div>
</div>
}
My Controller :
int tphigh = 0;
// GET: /RandomList/
[HttpPost]
public ActionResult GetRandomThirdPartyList(VM.RandomList random)
{
// tphigh=Convert.ToInt32(random.HighThirdPercent);
if (random.HighThirdPercent != null)
{
tphigh = Convert.ToInt32(random.HighThirdPercent);
// RedirectToAction("HighRiskCOPL", high);
}
List<VM.RiskList> risklist = (List<VM.RiskList>)AutoMapDomainModel<List<VM.RiskList>>(randomDBentity.GetRandomList(0, 0, tphigh,null));
mainlist.HighThirdPercent = tphigh;
mainlist.ThirdParty = //some list as third party is a Ienumerable
return PartialView("ThirdPartyContractors",mainlist);
}
The form posts properly first time, but from second time, it calls all the code lines in the action method tiwce, sometimes in a haphazard order and finally either populates the grid, or doesnt send any result.
Solved it.. My updatetargetid div was not the parent div..
replaced that..
I am using asp.net MVC 4 for my project, and I have a Model.
and I am using Bootstrap Carousel to show products for my Index Page (see the image below)
Now my question is: I want to show 3 Products in each slide item.
should I write a ViewModel for this?
<div class="carousel slide>
#for (int i = 0; i <= Model.Count()/3; i++ ) <!-- this works well, paging -->
{
<div class="item #if(i==0){<text>active</text>}">
#foreach(var well in Model)
{
<div class="span4">
<!-- some html here -->
</div>
}
</div>
}
</div>
Your inner foreach is iterating over the entire Model collection - you'll need to restrict it to just the relevant three items.
I'm guessing you want something like:
<div class="carousel slide>
#for (int i = 0; i <= Model.Count()/3; i++ ) <!-- this works well, paging -->
{
<div class="item #if(i==0){<text>active</text>}">
#foreach(var well in Model.Skip(i*3).Take(3))
{
<div class="span4">
<!-- some html here -->
</div>
}
</div>
}
</div>
One way to think about this problem is to split the original collection into groups for each 3 sequential elements. Fortunately, you can use the GroupBy LINQ method using the "element index divided by 3" as key. IMO, the advantage of this solution is that it expresses more clearly your intent and has better performance than reiterating the collection with Skip(x * 3).Take(3) in the inner loop.
<div class="carousel slide>
#foreach (var group in Model.Select((x, index) => new { element = x, index }).GroupBy(x => x.index / 3, x => x.element))
{
<div class="item #if( group.Key == 0) {<text>active</text>}">
#foreach(var well in group)
{
<div class="span4">
<!-- some html here -->
</div>
}
</div>
}
</div>
I would even change the model type to ILookup<int, TElement> and perform the grouping in the controller.
Is it possible to include div tags within a for loop in an asp.net page and assign its id dynamically so that I can refer a particular div tag with the assigned id in a jquery script.
I want to do something like below.
#for(var i = 0; i < projectCountGlobal; i++)
{
<div id="i" > // id should be assigned dynamically
<div id="ProjectImage">
</div>
<div id="ProjectName">
</div>
<div id="Experts">
<div id="ExpertImage">
</div>
<div id="ExpertName">
</div>
</div>
</div>
}
From the snippet it seems like you are doing razor view so you can simply do like this,
<div id="#i" >
that shall do the trick.
i you can do this using following code snippet:
$('.topopup').hover(function () {
for (var i = 0; i < 5; i++) {
$('body').append('<div id=' + i + '>a</div>');
}
})
// HTML code on page
<body>
Click Here
<div id="toPopup" style="display:none;">
<div id="popup_content">Rahul Deshmukh</div>
<div id="backgroundPopup"></div>
<div id="containerDiv"></div>
</div>
</body>
here i am appending div inside body tag for this you need to add min.js also in your peoject folder
here "topopup" is a anchor tag and on the mouse over of this anchor tag, i am adding div inside body tag.