Is it possible to combine these two html tables into one table instead?
I can't seems to do it no matter how, it either tell me no start tag or no close tag for the table.
Goals:
1) One <table> with two <tr> and each <tr> has two <td>.
2) Top download button (from top form) in top <tr>.
3) Bottom download button (from bottom form) in bottom <tr>.
<table>
<tr>
<td></td>
<td>
#using (Html.BeginForm("GenerateExcelReport", "Pages", FormMethod.Post, new { name = "formExcel", id = "formExcel" }))
{
#Html.DevExpress().Button(button =>
{
button.ClientSideEvents.Click = "OnClick";
button.Name = "buttonExcel";
button.Text = Resources.Global.buttonExportExcelExtra;
button.UseSubmitBehavior = true;
}).GetHtml()
}
</td>
</tr>
</table>
#using (Html.BeginForm("DownloadMainReport", "Pages", FormMethod.Post))
{
<table>
<tr>
<td style="padding:2px;">
#Html.DevExpress().ComboBox(settings =>
{
settings.Name = "ExportMode";
settings.Properties.Caption = Resources.Global.labelExportMode;// "Details Export Mode ";
settings.Properties.ValueType = typeof(GridViewDetailExportMode);
settings.SelectedIndex = 0;
}).BindList(Enum.GetValues(typeof(GridViewDetailExportMode))).Bind(GridViewDetailExportMode.None).GetHtml()
</td>
<td style="padding:2px;">
#Html.DevExpress().Button(settings =>
{
settings.Name = "buttonExportExcel";
settings.Text = Resources.Global.buttonExportExcel;
settings.UseSubmitBehavior = true;
}).GetHtml()
</td>
</tr>
</table>
#Html.Partial("HomeReportPartial", Model)
}
Even if I use div, it will tell me it cannot find matching tag.
<div class="container-fluid">
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">
#using (Html.BeginForm("test0", "test0", FormMethod.Post))
{ }
</div>
<div class="col-md-10">3</div>
</div>
#using (Html.BeginForm("test1", "test1", FormMethod.Post))
{
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-10">3</div>
</div>
</div>
}
Parser Error Message: Encountered end tag "div" with no matching start tag. Are your start/end tags properly balanced?
Related
I'm studing Asp.Net core web applications.
I successfully created a CRUD website.
In the site I want to create a link to an external URL, e.g., to www.google.com
Here, the link is created this way.
https://localhost:44311/pVagaDivulgar/details/www.google.com
expected: www.google.com
Curso
Go
I dont know if I have to set some properties to make it work.
#model SiteJob1.ViewModel.pVagaDivulgar.IndexViewModel
#{
ViewData["Title"] = "details";
}
<h1>Jobdetails</h1>
#foreach (var item in Model.VMvagasdivulgar)
{
<h4>#item.VagadivulgarVaga.VagaTitulo</h4>
}
<table class="table">
<thead>
<tr>
<th>ID</th><th>Course</th><th>Link</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.VMvagasdivulgar)
{
<tr>
<td>
#item.VagadivulgarId
</td>
<td>
#item.VagadivulgarCurso1Navigation.CursoNome
</td>
<td>
Curso
Go
</td>
</tr>
}
</tbody>
</table>
<div>
#Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
<a asp-action="Index">Back to List</a>
</div>
ok, i understand your problem if you need to open Url then write full url like https://toastguyz.com
public ActionResult Index()
{
ViewBag.Title = "Home Page";
ViewBag.link = "https://www.toastguyz.com";
return View();
}
I am using AJAX.BeginForm to make changes to table rows (specifically, a row contains a div that is updated, and the div contains the row data). But the insertion of the <div> is made outside (just above) the actual table in the resulting HTML. Any idea? Thanks!
The table body is constructed with a forloop that produces a new table row, which in turn contains an AJAX.BeginForm helper. The helper wraps around a form, and a div to be replaced, and table row contents (just <td>s). Each table row uses its own model, and each model has a unique resourceID that is used to give the div an identifier so that it may be updated.
When a value of a dropdown in a table row is changed, a function submitExistingSettingForm is called, and that function in turn submits the AJAX.BeginForm helper for the changed row.
<script>
function SubmitExistingSettingForm(resourceIdentifier) {
var formName = resourceIdentifier + "Form";
console.log("SubmitAddSettingTriggered with form id " + formName);
var form = $('form[name=' + formName + ']');
$("#" + formName).submit();
$.validator.unobtrusive.parse("#" + formName);
}
</script>
<table class="table table-hover table-fixedlayout table-bordered shadow">
<colgroup>
<col width="1" />
<col width="2" />
</colgroup>
<thead>
<tr>
<th>Col1</th>
<th>Col2", AJAX_LOADER_SHOW, AJAX_LOADER_HIDE)</th>
</tr>
</thead>
<tbody>
#foreach (Model subModel in Model.subModels)
{
<tr class="result-row break-word">
#using (Ajax.BeginForm("Report", "ReportController", null, new AjaxOptions
{
HttpMethod = "POST",
OnSuccess = "SuccessMessage",
OnFailure = "FailMessage",
UpdateTargetId = #report.ResourceId,
InsertionMode = InsertionMode.Replace
}, new { id = reportSetting.ResourceId + "Form" }))
{
<form>
<div id=#report.ResourceId>
#Html.Action("SingleReport", report)
</div>
</form>
}
</tr>
}
</table>
The SingleReport page:
#{ object areaDropDownAttributes = new { #class = "form-control" };
}
#Html.HiddenFor(m => m.ResourceId)
<td>
<input type="submit" class="btn btn-danger btn" value="X" />
</td>
<td>
#Html.DropDownListFor(m => m.ReportSetting1, Model.AvailableReportSettings.ReportSetting1s, new
{
#id = "ReportSetting1Id",
#class = "form-control",
#onchange = "SubmitExistingSettingForm('" + #Model.ResourceId + "')"
})
</td>
I try to make checkboxes under each other like this:
<table>
<tr>
<td>
#foreach (var item in Model.Directories)
{
#Html.CheckBox("Assigned", Model.IsActive.HasValue ? Model.IsActive : false);
#Html.LabelFor(model => model.Directories)
}
</td>
</tr>
</table>
but now the checkboxes are all under the same line.
Thank you
If you wish for the checkboxes to appear in a new line, rather than appending to the same td cell, you should append to create a new tr instead:
<table>
#foreach (var item in Model.Directories) {
<tr>
<td>
#Html.CheckBox("Assigned", Model.IsActive.HasValue ? Model.IsActive : false);
#Html.LabelFor(model => model.Directories)
</td>
</tr>
}
</table>
which will create a new table row for each model Item
I've got a site build with RazorViewEngine where using "_ViewStart.cshtml" to set the layout to "Shared/_Layout.cshtml". Then, I've the following module:
public class LogModule : NancyModule
{
public LogModule()
{
Get["/log"] = _ =>
{
var list = GetLog().ToPagedList(1, 5);
return View["Index", list];
};
Get["/log/{page:int}"] = _ =>
{
int pageNumber = _.page ?? 1;
var list = GetLog().ToPagedList(pageNumber, 5);
return View["_List", list];
};
}
}
And the following views:
Index.cshtml
#using Nancy.ViewEngines.Razor
#using PagedList
#inherits NancyRazorViewBase<IPagedList<LogModel>>
<h1>View Log</h1>
<div id='container'>
#Html.Partial("_List", Model)
</div>
_List.cshtml
#using Nancy.ViewEngines.Razor
#using PagedList
#inherits NancyRazorViewBase<IPagedList<LogModel>>
<table class="table table-hover table-condensed">
<thead>
<tr>
<th>Date</th>
<th>Message</th>
</tr>
</thead>
<tbody>
#foreach (var log in Model)
{
<tr class="#log.Class">
<td>#log.Date</td>
<td>#log.Message</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td colspan="2">
<div class="pagination" data-current="#Model.PageNumber" data-count="#Model.PageCount">
<ul class="list-unstyled list-inline">
<li>|<</li>
<li><</li>
<li class="active"><span>#Model.PageNumber / #Model.PageCount</span></li>
<li>></li>
<li>>|</li>
</ul>
</div>
</td>
</tr>
</tfoot>
</table>
And finally, some javascript code to manage ajax requests to the '/log/{page:int}" action and replace the 'container' div with the result. Sadly, this result contains a full page, including _Layout.cshtml and breaking all the page.
In MVC this is solved using return PartialView(viewName, Model) but I couldn't find something similar in NancyFx. Is there something I'm missing?
Turned out that the solution is quite simple. Just create an 'empty' layout file with this single line:
#RenderBody()
And then use it in your partial view:
#{ Layout = "Shared/_EmptyLayout"; }
I have a Razor page which contains a table and partial view with source as a List //(Model.LeaveTypeList)
#using (Html.BeginForm())
{
<table>
#*Grid Added as Partial View for leave Types*#
<tr>
<td colspan="2">
<div>
#Html.Partial("LeaveTypesPartial", Model.LeaveTypeList)
</div>
</td>
</tr>
</table>
}
This is the partial view (LeaveTypesPartial.cshtml)
#model List<AscoraWeb.Models.LeaveTypeModel>
#{
Layout = null;
}
#{
//canSort:false,
var grid = new WebGrid(source: Model,
defaultSort: "Name",
rowsPerPage: 7);
}
<table>
<tr>
<td colspan="2" style="text-align: left; font-family: Arial Baltic; font-style: italic;font-size: 15px">
These leaves can be assigned to Employees in the Service Calender for scheduling
</td>
<td colspan="2" style="text-align: left; font-family: Arial Baltic; font-style: italic;font-size: 15px">
</td>
</tr>
#*Row with buttons*#
<tr>
<td align="right" colspan="1">
<input type="button"/>
<input type="button"/>
</td>
</tr>
<tr>
<td>
<div id="grid">
#grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("name")
)
)
</div>
</td>
</tr>
</table>
In the application controller we are assigning some value to the partial view
public ActionResult RatesAndCharges()
{
//Message that will appear before the content of the view is shown
ViewBag.Message = "This is the Rates and Charges section!";
//Adding content for the leave types grid
var ratesChargesModel = new RatesChargesModel { };
ratesChargesModel.LeaveTypeList = new List<LeaveTypeModel>();
var leaveTypeModel = new LeaveTypeModel { Name = "Paid Leave" };
ratesChargesModel.LeaveTypeList.Add(leaveTypeModel);
leaveTypeModel = new LeaveTypeModel { Name = "Unpaid Leave" };
ratesChargesModel.LeaveTypeList.Add(leaveTypeModel);
return View(ratesChargesModel);
}
This works fine and I am able to see my Grid with elements
The grid elements can be sorted by Name (as we have defaultsort: Name)
but when we click on name the whole page gets refreshed (call being made to public ActionResult RatesAndCharges())
Hence I need a way to sort my elements in the grid without having to refresh my page.
You would have to make an AJAX request to the server using JQuery or something else... I don't know that the WebGrid supports this or not. But you can always do it yourself by using JQuery to invoke an action method, which returns a partial view, and you swap the old HTML for the new.