I have a block that opens modally for selection from a list. I don't want to embed it in every view. I want this to happen through Razor or C#. I think it would be wrong to store this in _Layout.cshtml (I could be wrong).
<label hidden id="selectionInitiator"></label>
<label hidden id="sourceList"></label>
<div id="modalDialog" class="modal fade">
<div id="dialogContent" class="modal-dialog">
<div style="background:white; padding:15px; border-radius:5px;">
<div class="modal-header">
<button class="close" data-dismiss="modal" area-hidden="true">X</button>
<h4>Выберите элемент из списка</h4>
</div>
<div id="modalContainer" class="modal-body">
<div class="treeItems" id="treeRoot">
<!-- Dymanical -->
Загрузка данных...
</div>
</div>
</div>
</div>
</div>
This type of reusable code for modal boxes should be in the _Layout.cshtml file. Otherwise you will have to remember and add in all the pages where you need the modal box.
However if you do not want to put the html in the _Layout.cshtml file then you have to include it in all the views where you need those. For that you can do the followings:
Move the html to a partial view, call it _ModalBox.cshtml
Include the partial view in all the pages where you need that
Use javascript to hide/show the modal (I guess you are already doing that)
First Move the view to a partial file called _ModalBox.cshtml. Keep this file in the Shared folder.
Then include the view in the pages like this:
#await Html.PartialAsync("_ModalBox.cshtml")
Note: You can add the _ModalBox.cshtml partial view to the _Layout.cshtml file instead. That would be the better practice.
I have a project in Visual Studios 2017 with this block of code in it. I just went to remake it in on my work computer (running 2015). Is there a reason why the middle two links don't work anymore?
The code doesn't even turn purple in the IDE. The top screenshot is from my laptop, the bottom screenshot is from my work computer (where the trouble is) https://gyazo.com/2968018e89c24748d48cb2291dce50d3?token=e038af6931608caede27c103a0365184
<div class="col-sm-6">
<div class="well well-sm" style="background-color:lightcyan">
<h4>AVAS for Opperations</h4>
<div class="list-group">
AVAS Time-Space Chart <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%">
History by Bus/Run/Operator <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%">
<a asp-area="" asp-controller="Home" asp-action="Legal" class="list-group-item" data-toggle="tooltip" title="(Make a list of stops and timepoints for a bus for an hour)">Bus-Hour History <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%"></a>
<a asp-area="" asp-controller="Home" asp-action="Legal" class="list-group-item" data-toggle="tooltip" title="(Make a list of buses passing a selected stop)">Bus-Stop History <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%"></a>
</div>
</div>
</div>
Maybe you are missing Razor Language Services.
Check this question.
Im having an issue to reload a partial view using ajax.
I have my country form in a partial view, and initially when i load the main page everything is rendered properly.
As demonstrated in the image below, I can search for country using my autocomplete and i can select a countryfrom my combobox (both are kendo-mvc controntrols)
The issue emerges when i select a from my autocomplete and try to load the info of the selected country via ajax. The form is reloaded, the info is displayed but the controls are not being rendered properly. The autocomplete stops working and the combobox is rendered as a normal textbox, displaying the CountryID instead of the Country name.
Code in my view
#using (Html.BeginForm("Index", "CountryManagement", FormMethod.Post, new { id = "country-form" }))
{
#Html.ValidationSummary(true);
<div id="form-content">
#Html.Partial("_CountryForm", Model)
</div>
}
Code in my partialview
<div class="form-group">
#Html.Label("Search Country", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-3">
#(Html.Kendo().AutoCompleteFor(m => m.Search)
.DataTextField("Designation")
//.DataValueField("CountryID")
.Filter("contains")
.MinLength(2)
.DataSource(d => { d.Read(r => r.Action("SearchCountry", "Common")); })
.Events(e => e.Change("onChange")).Deferred()
)
</div>
</div>
Code in my controller
[HttpPost]
public PartialViewResult Edit(int id)
{
//HTTP GET: api/Country/CountryDetails?id={id}&lang={lang}
dynamic model = //code to get selcted country data
return PartialView("_CountryForm", model);
}
Code in my .js file
function onChange() {
if ($("#Search").data("handler")) {
var data = $("#Search").data("handler").dataSource.data();
var country = data.find(x => x.Designation == $("#Search").val());
console.log("Country")
if (country) {
var request = $.post('/CountryManagement/Edit', { id: country.CountryID });
request.success(function (data) {
$("#form-content").html(data);
});
}
}
}
HTML code generated on page load (autocomplete and dropdown only)
<div class="form-group">
<label class="control-label col-md-2" for="Search_Country">Search Country</label>
<div class="col-md-3">
<span tabindex="-1" role="presentation" class="k-widget k-autocomplete k-header k-state-default k-state-hover"><input data-val="true" data-val-length="Description must have between 1 and 150 characters" data-val-length-max="150" data-val-length-min="1" id="Search" name="Search" type="text" data-role="autocomplete" class="k-input" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-owns="Search_listbox" aria-autocomplete="list" has-focus="false" style="width: 100%;"><span class="k-icon k-loading" style="display:none"></span></span>
</div>
</div>
<br>
<br>
<div class="form-group">
<label class="control-label col-md-2" for="Country">Country</label>
<div class="col-md-3">
<span class="k-widget k-combobox k-header"><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input name="CountryID_input" class="k-input" type="text" autocomplete="off" title="" role="combobox" aria-expanded="false" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="CountryID_listbox" has-focus="false" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1" aria-controls="CountryID_listbox">select</span></span></span><input data-val="true" data-val-number="The field CountryID must be a number." id="CountryID" name="CountryID" type="text" value="0" data-role="combobox" aria-disabled="false" aria-readonly="false" has-focus="false" style="display: none;"></span>
<span class="field-validation-valid text-danger" data-valmsg-for="CountryID" data-valmsg-replace="true"></span>
</div>
</div>
HTML code generated on partialview reload (autocomplete and dropdown only)
<div class="form-group">
<label class="control-label col-md-2" for="Search_Country">Search Country</label>
<div class="col-md-3">
<input data-val="true" data-val-length="Description must have between 1 and 150 characters" data-val-length-max="150" data-val-length-min="1" id="Search" name="Search" type="text" value="South Africa">
</div>
</div>
<br>
<br>
<div class="form-group">
<label class="control-label col-md-2" for="Country">Country</label>
<div class="col-md-3">
<input data-val="true" data-val-number="The field CountryID must be a number." id="CountryID" name="CountryID" type="text" value="1003">
<span class="field-validation-valid text-danger" data-valmsg-for="CountryID" data-valmsg-replace="true"></span>
</div>
</div>
I'm not sure if this is an issue with ASP.Net MVC partialviews, Kendo controls or some scripts that should be re-run when the partialview reloads.
Can someone please help me?
After numerous failed attempts and fruitsless digging in the deep end of Telerik forums, i finally found out what the problem is.
Kendo widgets in partial views should not use deferred initialization.
#(Html.Kendo().AutoCompleteFor(m => m.Search)
///.. code removed to reduce complexity
.Events(e => e.Change("onChange")).Deferred()
)
When the view is loaded through as server request, it renders properly because in the end of the layout file, all the widgets with deferred initialization are initialized using #Html.Kendo().DeferredScripts(). However when the partial view is reloaded via ajax, the deferred scripts initialization never happens because the scripts are not re-run.
Adding #Html.Kendo().DeferredScripts() to the partial view solves the problem of ajax reload but becomes and issue on server loading because: 1 - The deferred initialization would be running twice, and 2 - Because kendo widgets have jquery dependencies and would be running before the jquery scripts are included in the page.
The solution i found was to not deffer the initialization of the widgets, however this would take us back to the point above regarding the jquery dependencies. And as much as i tried to avoid it, the only thing that really worked was to include jquery in the page header. All of the other scripts (validation, kendo, custom, etc) are still at the bottom but the main jquery script is at the top. And now my partial views load perfectly on server or ajax request.
TL;DR;
Do not use deferred initialization in partial views
Move jquery.min.js to the top of the page.
Hopefully there is a better way to do it but for now it does the trick.
So I was searching the forums and couldn't find a suitable fix either. But i did the following and it seems to work just fine. Basically if the partial is rendered normally then the layout view handles the deferred scripts, but if the request is through AJAX then the partial view will go ahead and render them.
I put this at the bottom of my partial:
#if (Context.Request.IsAjaxRequest())
{
<div id="kendo-scripts">
#Html.Kendo().DeferredScripts()
</div>
}
FYI, leave the .Deffered() at the end of your kendo object also in case that wasn't apparent.
Check for any page script initialization errors!
I was running into the same problem here and burned 3 days on it, the issue for me ended up being there was a page initialization script script around the no MutationObserver not being available in older safari browser. After adding a polyfill and fixing init error, dynamically injected ajax content with Kendo controls worked fine with no defer needed. Hopefully this saves someone else some frustration.
This init error affected jquery's ready initializer callback for any ajax content which Telerik relies upon to render each control in the script block that it emits.
i am using mvc 4 application. actually my application it should running correctly by suddenly it showing compilation error and cleared all the temp files also it not working please help me
My error is:
View Code
<div id="page-wrapper">
<div class="row">
<div class="#ViewBag.HideClass">
#ViewBag.Message
</div>
<div class="col-lg-12">
<h2 class="page-header"> User Registration </h2>
<input type="hidden" id="MenuId" value="#(int)MenuDetails.MenuCompanyMaster" />
</div>
<!-- /.col-lg-12 -->
</div>
thank in advane
In your view page try changing this:
value="#(int)MenuDetails.MenuCompanyMaster"
To this:
value="#((int)MenuDetails.MenuCompanyMaster)"
In Razor syntax, an # section followed by a ( will end the C# code at the nearest matching ). In this case, it's just the #(int). The MenuDetails.MenuCompanyMaster section ends up being random other markup. By wrapping everything in an extra () it indicates to the Razor parser that it's all one expression.
However, I'm not certain if that will fully solve the problem that you have.
I have some trouble with razor sections.
#section tools {
<div class="btn-group"">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Update every <span id="update_time_label" class="label label-info">10 s.</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1 s.</li>
<li>5 s.</li>
<li>10 s.</li>
<li>30 s.</li>
<li>60 s.</li>
<li>120 s.</li>
</ul>
</div>
<button class="btn" onclick="return SelfAction.loadNewItemsNow()">Update now</button>
} <-- Can't detect
As you see in the code, it does not detect the closing bracket. I'm now learning C# and MVC4 and can't find any solution. I don't want to use viewbag for this big HTML block. Maybe there is some specific closing tag for big HTML blocks? Something like #sectionStart and #sectionEnd?
Remove the second " at the end of <div class="btn-group""> and see if that helps. The Razor engine is VERY finicky, and something stupid like that could cause it to continue to look for a string, and since everything else matches up, the closing } would be inside a string.