|
I finally figured out how to integrate Angular 6 into a .Net 2.1 core project, and get all my scss and scripts loaded and the first page loaded correctly.
So now I'm on to the Angular Questions. What section would be the proper place to post them?
My Question:
I understand the Home component, module and routes for a single component.html page. But I really want to add a page called 'websites' and use the home.component, home.module and home.routes for it, basically just add another HTML file.
Is is possible for me to just add another html file to the home.component, home.module and home.routes?
Or do I have to make a component, module and route for every page?
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Not the best person to answer this, but you could try posting Angular related questions to Web Development forum section: Web Development Discussion Boards[^], Otherwise if the issue is more on ASP.NET Core side, you can post your query here.
I'm not aware of an official forums discussion for Angular, but you could also try posting Angular queries at SO: Newest 'angular' Questions - Stack Overflow[^]
|
|
|
|
|
I was just thinking about this post an hour ago.
Well I heard the sound of crickets here, so perhaps I'll have to try another venue for Angular questions.
I'm past the .net core part of Angular, and I'm on pure Angular typescript and router now.
I'm starting to see the downside of using Angular with .Net Core 2, in which I have to double build each time I change something, which is time consuming.
But thanks for the answer!
If it ain't broke don't fix it
Discover my world at jkirkerx.com
modified 1-Aug-18 12:00pm.
|
|
|
|
|
You bet. Good luck on exploring Angular! 
|
|
|
|
|
Hi,
I am doing an mvc application.
I am unable to send data from view to controller.
View code
@model IEnumerable<studentcourse.models.course>
Index
@foreach(var item in Model)
{
- @Html.ActionLink(item.coursename,"Details","Home",new {name=item.coursename})
}
controller code:
public ViewResult Details(string name)
{
return View(db.students.Where(x=>x.cousename==name.ToString()).ToList());
}
the parameter value for "string name" is showing null.
thanks in advance
|
|
|
|
|
Try replace this line
@Html.ActionLink(item.coursename,"Details","Home",new {name=item.coursename})
with
@Html.ActionLink(item.coursename,"Details","Home",new {name=item.coursename}, null)
c# - HTML.ActionLink method - Stack Overflow[^]
Bryian Tan
|
|
|
|
|
I'm trying to figure out the right way to play around with Angular in my .Net Core 2.1 project.
Right now I just have a folder with Angular in it, and created a bundle. In the View I created markup to call the controller and render the output.
It works fine for now, at least I think it does.
But I used some other examples, such as using ng new ClientApp and followed the instructions. Now my project loads the Angular index page instead of my views. Funny how that sure works fine, and I guess I pulled it off.
I'm trying to create some sort of hybrid here, where a couple of pages can be Angular, while the others are MVC.
Am I correct is assuming the above is strictly for creating a pure Angular project? A pure Angular project in which everything is Angular, or is it possible to for me to mix the two together, and perhaps a hint on how.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I honestly wouldn't recommend it. The purpose of Angular and other SPA starter frameworks is to push the rendering responsibility down to the client side; splitting that responsibility will only make the application harder to maintain as people will need to play the "where did this render?" game.
There's another important factor to consider, and I think it's the one that's tripping you up: the routing mechanism. Angular uses a routing mechanism that is completely separate from the one used by MVC. Those two need to be setup to agree with each other (or at least don't overlap) before anything else. If all rendering is in NG, the MVC router pretty much gets relegated to controller location for AJAX requests - which NG will play nicely with out of the box - but as soon as you need to serve pages all that changes.
So long answer short: the right way to use Angular in a .NET Core project is to not straddle your presentation layer between client and server. Let the client be your presentation layer, and only business/DAL logic on the server.
"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor
|
|
|
|
|
I didn't think of the router part. I wonder if I can take my Portfolio controller and remove it from MVC, and recreate that in Angular.
Then try writing a Angular Image Index and Gallery.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I determined that mixing MVC and Angular is probably not a good way to learn, so I decided to just create a .Net Core 2.1 App with Angular.
I'm having trouble understanding node_modules, wwwroot and Angular.
This may not come out or sound clear here;
But in the angular.json, I added mdbootstrap, fontawesome from node_modules.
So I see a styles.js file appended to the page displayed in the browser source. I would assume that this file loads my css or sass. But none of my mdbootstrap styles render. So I was thinking perhaps its because the source of the css or sass is in node_modules, and only content in the wwwroot will be displayed. My old school thinking here is the link tags in the header.
So OK, perhaps I need to somehow generate all this to the wwwroot.
Now comes WebPack. I guess with a proper WebPack configuration, all my custom assets such as images, css, sass would be built and copied to wwwroot.
My question is that this part is fuzzy to me, and I'm not sure which direction to go here and was looking for a suggestion.
I would like to try the mdboostrap, it's JQuery and FontAwesome in my learning project here.
A 2nd issue, is that I loaded WebPack from Package.Json, and when I run my WebPack.Config.js in Webpack Task Runner, it complains about using let and use strict.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I decided to go with webpack, and fixed the error, updated node and npm in the project.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi,
I am new to MVC want to load 5 different Partial Views on Javascript Conditions, like for example I have a dropdown list, on the page, depending upon the dropdown selection I want to load different Partial View, I am not able to use ViewBag as VieBag value is not changing depending upon the Dropdown list box, it seems I have to do that using jquery or javascript, can anybody please help me in doing it? Even if we can do it by using View is also fine if it is possible, in means if I can achieve it, it would be great. Thanks in advance its little bit urgent, please need your help.
@{
ViewBag.Title = "ListLookups";
}
<script>
var UserName = "@ViewBag.UserName";
</script>
<style>
.k-edit-form-container {
width: 500px;
}
</style>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="tab-content" id="dvtabs" style="padding-top:10px;">
<label class="col-md-4 control-label">Administration for Table: </label>
@(Html.Kendo().DropDownList().Name("Lookup").OptionLabel("Select")
.DataTextField("Text")
.DataValueField("Value").HtmlAttributes(new { style = "width:280px;", @id = "drpLookup" })
.DataSource(dataSource => dataSource.Read(read => read.Action("GetListOfLookupTables", "Admin")))
.Events(e =>
{
e.Change("GetLookupTableValue");
})
<pre>
)
</div>
<div style="margin-top: 5px; padding-left:3%; padding-right:2%">
<div>
<div>
<h4 id="myHeader"></h4>
</div>
Here should be my Conditions like (if x==y)
@Html.Partial("_LookupTableNoCode")
else if (x==z)
@Html.Partial("_LookupTableCode")
}
function LookupPopUpTitle(e)
{
var lookupTableName = $("#drpLookup").data("kendoDropDownList").text();
<pre>
if (e.model.isNew())
{
$('.k-window-title').text("Add " + lookupTableName);
e.model.set("CreatedBy", UserName);
//e.model.set("State", "California");
//e.model.set("EffectiveDateFrom", new Date());
}
else
{
$('.k-window-title').text("Edit " + lookupTableName);
e.model.set("ModifiedBy", UserName);
}
}
$(document).ready(function ()
{
//alert("test 1");
var grid = $("#LookupGrid").data("kendoGrid");
grid.dataSource.read();
//alert("test 2");
})
function ConvertLEDate(val)
{
if (val != '' && val != null && val != 'undefined')
{
var date = new Date(parseInt(val.substr(6)));
date = date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear();
return date;
}
return null;
}
function DateFormat(val)
{
if (val != '' && val != null && val != 'undefined')
{
try
{
var dt = val.getMonth() + 1 + "/" + val.getDate() + "/" + val.getFullYear();
return dt;
}
catch (e)
{
return ConvertLEDate(val);
}
}
return '';
}
function ViewLookupTableValues(e)
{
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var PkContactId = dataItem.Id;
window.location.href = '@Url.Action("GetProgramTypeById", "ProgramType")?id=' + Id + "&Type=View";
}
function GetLookupTableId()
{
return {
LookupTableId: $("#drpLookup").data("kendoDropDownList").value()//, ParentId: PkPrvId, ParentTypeCode: 'PRV'
};
}
function GetLookupTableValue(e)
{
if ($("#drpLookup").data("kendoDropDownList").text() != 'Select')
myHeader.innerText = "List of " + $("#drpLookup").data("kendoDropDownList").text();
else
myHeader.innerText = "";
//myHeader.innerText = "List of " + $("#drpLookup").data("kendoDropDownList").text();
var grid = $("#LookupGrid").data("kendoGrid");
grid.dataSource.read();
}
function GetLookupTableValue1(e)
{
var grid = $("#LookupGrid").data("kendoGrid");
grid.dataSource.read();
}
</pre>
else if its possible with ViewBag is also fine like below, in any means if it is possible, please help me, I need your help friends please.
(if ViewBag.Id==y)
@Html.Partial("_LookupTableNoCode")
else if (ViewBag.Id==z)
@Html.Partial("_LookupTableCode")
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
|
|
|
|
|
If I remember correctly, the ViewBag is only available once, and is set in the controller. It's lifespan ends after the view is rendered.
So you might want to test you ViewBag Value, and just print it on the page, then make sure your Razor logic matches. I think it's case sensitive as well.
@if (ViewBag.ID == 1) {
RenderPartial("_LookupTableNoCode")
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Yeah is there anyway I can render different Partial Views on selection of different elements in the dropdown list? The above solution you have given me has only rendered the same Partial View irrespective of the selected item in the dropdown, since ViewBag is not changing. It seems I have to call jquery, javascript or ajax, if you know any solution for it, please let me know.
Thanks for helping me my friend.
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
|
|
|
|
|
Well I can think of 2 ways.
1 is to combine all the partial views into 1 partial view, and ID the main <div> elements to make them separate units. Them use JQuery to show the one you need based off the change event of the dropdown.
2, Maybe try your Angular experience from the last couple years and see if you can go all JavaScript, and build the partial views using Angular.
3, Perhaps that's what view components are for in .Net Core 2+.
I have something similar in one project, where you pick a payment method off an array of buttons, and I use Bootstrap collapse to expand the proper payment HTML. I have it setup sort of like an accordion.
I have another where the partial HTML is small enough to just generate HTML in JQuery. I call the function Print_One which just appends the DOM.
I try hard not to use the dropdowns anymore, and switched to radio buttons, or small text buttons instead.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi I did resolve it buddy this way:
function GetLookupTableValue(e)
{
if ($("#drpLookup").data("kendoDropDownList").text() != 'Select')
myHeader.innerText = "List of " + $("#drpLookup").data("kendoDropDownList").text();
else
myHeader.innerText = "";
var noCodeFilter = containsAny($("#drpLookup").data("kendoDropDownList").text(), ['Address Type', 'Gender', 'NPI Status', 'Rendering Provider Status', 'Rendering Provider Classification']);
if (noCodeFilter)
{
var url = '../Admin/GetLookupTableNoCode';
$("#divLookupTable").load(url, { LookupTableId: $("#drpLookup").data("kendoDropDownList").value() });
}
else
{
var url = '../Admin/GetLookupTableCode';
$("#divLookupTable").load(url, { LookupTableId: $("#drpLookup").data("kendoDropDownList").value() });
}
}
Now I am feeling interested in MVC, these things were very difficult without loading a while Page in classing ASP.net previously, just some learning curse it seems, it all mostly ajax, jquery and javascript
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
|
|
|
|
|
I didn't think of that, but job well done!
I thought you were already doing MVC?
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I am kind of switching a bit from SQL Server, SSIS, BizTalk, SSRS and MVC, SSIS is my interesting one
I have one more question buddy, I want to write a css class of my own for a textbox like below:
.codevalue2ditis{
maxlength : "5";
pattern : "[a-zA-z0-9]{5}";
validationmessage : "Enter only 5 numerics for {0}"
}
Is it possible to create one and assign it to a textbox I needed to create one because I have to add and remove the css classes at run-time, the textbox should allow only two digits, is there any way to do that, I will be writing similar classes for different conditions and want to add and remove them dynamically depending upon the dropdown selection, its my plant but not sure if its possible.
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
-- modified 18-Jul-18 15:01pm.
|
|
|
|
|
To the best of my knowledge, No.
for max length, that's an HTML5 thing.
<input type="number" name="digits" maxlength="2">
But there are some caveats to using this. I don't think 0 is a number, more like 1+.
In MVC, you would add an attribute to the form model, and the validator would check it.
Or in JQuery.Validate, you would write a rule.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I understand, if it is Kendo control like this, and I want to add or remove validations to it, how can I do?
@Html.Kendo().TextBoxFor(model => model.Code).Name("txtForCode").HtmlAttributes(new { autocomplete = "off", id = "idTxtForCode" })
I want to add or remove validation conditions for this textbox dynamically, is there any way to do it using jquery?
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
|
|
|
|
|
I'm not sure if JQuery can change the input type from text to number. But you can add max, min, length.
I think browsers have locked input type, so you can't change a password to clear view.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
No I don't want to change input type from text to number but what I want is, if text is typed when its value is supposed to be number, it shouldn't take that value, I mean no matter how many characters user types, it shouldn't display or take it, when it is supposed to be characters, the numbers or numerical values shouldn't be taken as input in the textbox. And the number of characters or numbers should be limited depending upon the conditions in JavaScript function.
Below is the example for JavaScript function:
function GetLookupTableValue(e)
{
var noCodeFilter = containsAny($("#drpLookup").data("kendoDropDownList").text(), ['Address Type', 'Gender', 'NPI Status', 'Rendering Provider Status', 'Rendering Provider Classification']);
if (noCodeFilter)
{
var url = '../Admin/GetLookupTableNoCode';
$("#divLookupTable").load(url, { LookupTableId: $("#drpLookup").data("kendoDropDownList").value() });
}
else
{
var url = '../Admin/GetLookupTableCode';
$("#divLookupTable").load(url, { LookupTableId: $("#drpLookup").data("kendoDropDownList").value() });
$("#idTxtForCode").addClass('del'); //.removeClass('add')
}
}
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
|
|
|
|
|
|
Hi,
Yes I did in the below way
<script><br />
if (1 == 1)
{
$('#idTxtForCode').addClass("allownumericwithoutdecimal");
}
<pre>
$(".allownumericwithoutdecimal").on("keypress keyup blur", function (event)
{<br />
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57))
{
event.preventDefault();
}
});
in the following form, it is working fine for the character values like its not inputting the character values when I type in, but when I enter one integer value it is working fine but when I enter second value, its removing all the values I entered making the textbox blank, I am not understanding why is it doing that way.
My form is as below:
@model XXXXX.Provider.Models.LookupTable
@{
ViewBag.Title = "EditLookup";
}
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<pre>
<div class="k-edit-form-container">
<div class="editor-field" style="display:none;">
@Html.Kendo().TextBoxFor(model => model.LookupTableId).HtmlAttributes(new { id = "idLookupTableId" })<br />
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Code)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(model => model.Code).Name("txtForCode").HtmlAttributes(new { autocomplete = "off", id = "idTxtForCode" })
@*.HtmlAttributes(
new { style = "width:250px", type = "text", size = "5", id = "txtLENum", required = "required", maxlength = "5", pattern = "[a-zA-z0-9]{5}", validationmessage = "Enter only 5 numerics for {0}" })*@
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
@Html.Kendo().TextBoxFor(model => model.Description).HtmlAttributes(new { autocomplete = "off" })
</div>
<div class="editor-label" style="display:none;">
@Html.LabelFor(model => model.CreatedBy)
</div>
<div class="editor-field" style="display:none;">
@Html.Kendo().TextBoxFor(model => model.CreatedBy)
</div>
<div class="editor-label" style="display:none;">
@Html.LabelFor(model => model.CreatedDate)
</div>
<div class="editor-field" style="display:none;">
@Html.Kendo().DatePickerFor(model => model.CreatedDate)
</div>
<div class="editor-label" style="display:none;">
@Html.LabelFor(model => model.ModifiedBy)
</div>
<div class="editor-field" style="display:none;">
@Html.Kendo().TextBoxFor(model => model.ModifiedBy)
</div>
<div class="editor-label" style="display:none;">
@Html.LabelFor(model => model.ModifiedDate)
</div>
<div class="editor-field" style="display:none;">
@Html.Kendo().DatePickerFor(model => model.ModifiedDate)
</div>
<div class="editor-label" style="display:none;">
@Html.LabelFor(model => model.IsValid)
</div>
<div class="editor-field" style="display:none;">
@Html.Kendo().CheckBoxFor(model => model.IsValid)
</div>
}
And instead of doing the above function why is giving me error?
$(".allownumericwithoutdecimal").on("keypress keyup blur", function (event)
{
var charCode = (event.which) ? event.which : event.keyCode;
if(charCode > 31 && (charCode < 48 || charCode > 57))
{
event.preventDefault();
}
});
Thanks,
Abdul Aleem
"There is already enough hatred in the world lets spread love, compassion and affection."
-- modified 18-Jul-18 19:20pm.
|
|
|
|
|
I had to dig this up. I wrote this several years ago
function isNumberKey(evt) {
var charCode = evt.which ? evt.which : event.keyCode;
if (charCode !== 46 && charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
@Html.TextBoxFor(m => m.Order_Select_Product_Qty, new { @class = "form-control", min = "1", max = "1000", Value = "1", type = "number", pattern = "[0-9]*", inputmode = "numeric", onkeypress = "return isNumberKey(event);" })
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
