Conditionally Loading Partial View in a Page using Javascript

indian143

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";
}
var UserName = "@ViewBag.UserName";

.k-edit-form-container {
    width: 500px;
}

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

    Administration for Table: 
    @(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");
                            })

    )

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();

    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);
    }
}

</x-turndown>

jkirkerx

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

indian143

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."

jkirkerx

Well I can think of 2 ways. 1 is to combine all the partial views into 1 partial view, and ID the main

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

indian143

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."

jkirkerx

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

indian143

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."

jkirkerx

To the best of my knowledge, No. for max length, that's an HTML5 thing.

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

indian143

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."

jkirkerx

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

indian143

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."

jkirkerx

I use a JQuery function called .isNumber or something, you call it as a class. [Allow only numeric input in textbox using jQuery - JSFiddle](https://jsfiddle.net/Behseini/ue8gj52t/)

If it ain't broke don't fix it Discover my world at jkirkerx.com

indian143

Hi, Yes I did in the below way

if (1 == 1)
{
    $('#idTxtForCode').addClass("allownumericwithoutdecimal");
}

$(".allownumericwithoutdecimal").on("keypress keyup blur", function (event)
{      
    $(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()

        @Html.Kendo().TextBoxFor(model => model.LookupTableId).HtmlAttributes(new { id = "idLookupTableId" })   
    

    

        @Html.LabelFor(model => model.Code)
    

    

        @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}" })\*@
    

    

        @Html.LabelFor(model => model.Description)
    

    

        @Html.Kendo().TextBoxFor(model => model.Description).HtmlAttributes(new { autocomplete = "off" })
    

    

        @Html.LabelFor(model => model.CreatedBy)
    

    

        @Html.Kendo().TextBoxFor(model => model.CreatedBy)
    

    

        @Html.LabelFor(model => model.CreatedDate)
    

    

        @Html.Kendo().DatePickerFor(model => model.CreatedDate)

jkirkerx

I had to dig this up. I wrote this several years ago

// Numbers Only for Qty Textboxes
// Bind the function to the onkeypress event
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

indian143

The problem is I can't use these attributes (type = "number", pattern = "[0-9]*", inputmode = "numeric"), because they need to change depending upon the selection or value of the selected value of the dropdown list. But I could able to find the reason why its not working, because the textbox is in a partial view and as I am loading the partial view multiple times those functions are getting loaded multiple times, even if I use within document.ready, still it would be added multiple times. As I am opening the partial view as in the below Kendo grid popup , is there any way to clean this up once I close the popup or finish my task?

Page: Lookup2

    @(Html.Kendo().Grid()
                    .Name("LookupGrid")
            .EnableCustomBinding(true)
            .AutoBind(true)
            .Columns(columns =>
            {
                columns.Bound(p => p.Id).Hidden();
                columns.Bound(p => p.Code).Width(200);
                columns.Bound(p => p.Description).Width(290);
                columns.Bound(p => p.CreatedDate).ClientTemplate("#=DateFormat(CreatedDate)#").Width(130);
                columns.Bound(p => p.CreatedBy).Width(150);
                columns.Bound(p => p.ModifiedDate).ClientTemplate("#=DateFormat(ModifiedDate)#").Width(140); ;
                columns.Bound(p => p.ModifiedBy).Width(150);
                columns.Bound(p => p.IsValid).Width(100).Hidden();
                ////columns.Command(command => { command.Custom("View").Click("ViewLookupTableValues").HtmlAttributes(new { @class = "k-primary" }); }).Width(100);
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
                columns.Bound(p => p.LookupTableId).Hidden();
                columns.Bound(p => p.ForeignKeyId).Hidden();
            })
             .ToolBar(toolbar =>
                    {
                        toolbar.Create().Text("Add New");//.HtmlAttributes(new { @class = "k-button" });
                    })//.HtmlAttributes(new { @class = "btn btn-primary" })
                        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("\_EditLookupCode"))
                .Pageable()
                .Sortable()
                .Scrollable()
                         .Resizable(resize => resize.Columns(true))
                        .Filterable(x

jkirkerx

I'm sort of confused now on what your trying to create. remember I'm not there with ya and can't see what your doing. Document Ready is a signal indicating that the Dom is loaded, so you can execute client script automatically. Don't use it. And write a new external file, don't write it on the view page. I would imagine that your Document Ready would be empty, and when the dropdown changes value, then you call a independent JQuery Ajax function to load the partial view by calling a controller action and returning the HTML generated by the server. You can wrap the partial view HTML in a wrapper with a known ID, so you can call $("#KnownID").empty() to dump the partial view and $("#KnownID").html(data.partialview); to load the partial view. [javascript - Render Partial View Using jQuery in ASP.NET MVC - Stack Overflow](https://stackoverflow.com/questions/1570127/render-partial-view-using-jquery-in-asp-net-mvc)

If it ain't broke don't fix it Discover my world at jkirkerx.com

indian143

Yeah I can understand my friend, you are confused, and yes you are not with me to see and help directly, even doing this much is really really great - I think you live in LA, CA right? If you are travelling to Sacramento, CA, please please let me know I want to personally see you, meet you and thank you, if you don't mind give you a treat. Because even helping this much to a person who you speak just online is great - you must be a great human. And your imagination is right, there are two partial views I am loading, 1 I am loading with load method:

var url = '../Admin/GetLookupTableCode';
$("#divLookupTable").load(url, { LookupTableId: $("#drpLookup").data("kendoDropDownList").value() });

the other one I am loading with with Kendo popup:

.ToolBar(toolbar =>
{
toolbar.Create().Text("Add New");//.HtmlAttributes(new { @class = "k-button" });
})//.HtmlAttributes(new { @class = "btn btn-primary" })
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_EditLookupCode"))

Somehow I need to clean these two Partial Views once I am done, , can you please let me know the syntax for how to wrap partial view within some known id and empty partial view after I am done or finished with it? The first Popup that's being loaded with load method on the div "divLookupTable" just calls url with action method, loads within the same page, that contains a Kendo grid, which when clicked on Add New or Edit on a row, opens up partial view _EditLookupCode as a popup. But if I have written the document.ready only in the main page and tried to retrieve the TextBox, that is placed in the Popup (of Partial View _EditLookupCode), I am not able to retrieve, if I kept my document.ready in the _EditLookupCode partial view itself, its giving me error after second run, but if I write any if else conditions withing this _EditLookupCode.cshtml partial view within script tasks, still its not executing. Is there anyway I can retrieve the elements that are there on the _EditLookupCode.cshtml, note that this is the second partial view which opens up from click of a button on another partial view. Thanks, Abdul Aleem "There is already enough hatred in the world lets spread love, compassion and affection."

jkirkerx

I haven't been up in Northern California in a long time. I stopped there for gas on the way on from Seattle about 10 years ago. I'd be glad to meet you! I'm been following this on the thought that it's a single page application with no http postbacks. just pure manipulation of the DOM using client script. I suspect the postbacks are messing you up and confusing me. I can't write anything, and I think you have a flawed design in general and need to step back and rethink it. I beginning to think that your trying to postback the Kendo Grid, or a textbox value depending on the dropdown selection. You should be able to have both objects available, and just show and hide them. Then on the postback, check the dropdown value in the controller or page postback event, and use a switch to execute updating the selected section.

If it ain't broke don't fix it Discover my world at jkirkerx.com

indian143

Thanks my friend, sure we will try to meet for a lunch or something when you are travelling here or when I am travelling in Orange County. It seems there is something problem in it, I am very basic in jQuery and client script. Thanks, Abdul Aleem "There is already enough hatred in the world lets spread love, compassion and affection."

indian143

hi Buddy, I could able to do it by writing a function in the main page and calling that function multiple times in the popup whenever it loads, but another thing remaining is just putting numerical and text restrictions on the page depending upon the drop down selection. Yes you were right I had flaw that I was trying to create function in the popup as it loads multiple times, we can't have function definition multiple times hence it was throwing error. thanks a lot buddy. Thanks, Abdul Aleem "There is already enough hatred in the world lets spread love, compassion and affection."