0

I want to show a partial view when user clicks on a Button not on page load. I am facing an issue, partial view always comes on page load and on button click. I am not able to hide it on page load. This is _projectView.cshtml a partial view

@Html.Hidden("SessionProjectId", Convert.ToString(Session["PId"]))   
<div id="projectModal"  class="modal hide fade">
    <div class="modal-body">
        @(Html.Kendo().ComboBox()
    </div>
</div>

<script type="text/javascript">

    function showProjectModal(projectId) {
        $('#projectModal').modal({
            backdrop: 'static', keyboard: false
        });
    
        if (projectId > 0) {
            $("#ProjectCombo").data("kendoComboBox").value(projectId);
        }
        else {
            $('#projectModal').find('.close').hide();
        }
    }
</script>

This is _login (this also a partial view common for project) page from where _projectView.cshtml get initialized using showProjectModal button function. Below code also shows popup on page load(which I don't want).

<div>@Html.Partial("_ChooseProject")</div>  
<div class="row-fluid">
    <div class="span12">
        <div>
            <button type="button" class="btn btn-default" onclick="showProjectModal(@Session["ProjectId"] );">Project: <span id="projectLabel">@Session["ProjectName"]</span></button>
        </div>
    </div>
</div>

This is a Popup which comes on top center of the screen. When I try to hide it on page load using css/js, it hides but left the screen locked/blur. I can't click anywhere.

How can I stop showing _projectView.cshtml from _login.cshtml on page load ?

R15
  • 13,982
  • 14
  • 97
  • 173
  • The first thing I'd check is whether the `hide` class actually hides the div. If you're using Bootstrap, the latest version of it has deprecated the `hide` class in favor of either `invisible` or `d-none` depending on whether you want to have an empty space at the page where the invisible element should be. – Sergey Kudriavtsev Dec 27 '22 at 10:58
  • @SergeyKudriavtsev - I tried to hide it on page load, it hides but what happens is it left whole screen blur/dark and I can't click anywhere. – R15 Dec 27 '22 at 11:00
  • Are you using boostrap modal? If you are using boostrap modal, You can set `aria-hidden="true" `, Then show this modal only when `projectId>o ` in js. Because the default style is hidden. So I think this will now show when page load. – Xinran Shen Dec 28 '22 at 07:30

1 Answers1

0

Below are some logic with which you can restricted the event.

  1. If you identify the @Session["ProjectId"] is nullor less than 1 then you can place a condition under your showProjectModal function. if projectId having data then only you initialize else nothing.

  2. Another Option is that you can fill ViewBag from the controller end from the Login page . to identify request came from login so you can render script dynamically.

  3. Also you can handle with URL with the help of the JavaScript you can retrieve and check condition if login page no need to render/load event.

  4. You can also use Section as partial view to load your content.

Please some more details so will guide you more.

Karan Ekkawala
  • 317
  • 1
  • 11
  • First time it won't call showProjectModal function. It calls when I click on Button. – R15 Dec 27 '22 at 11:47
  • still you can manage place your function on the main view not on the partial view it's bad to load function every time when you click & load partial view. over the function you can check the above condition to fulfill your needs – Karan Ekkawala Dec 27 '22 at 11:50
  • How can I keep button click function in _login ? Bcz Popup UI, ids are there in the _projectView cshtml so that logic should go there. – R15 Dec 27 '22 at 13:25
  • ViewBag is not working, I tried. When happening - First time it wont show popup due to if condition but when I click button it throwing an error `showProjectModal is not defined` may be bcz _projectView file is not initialized due to Viewbag if condition. – R15 Dec 27 '22 at 13:28
  • If I keep button click function in _login, it is giving error. `Can't find value of undefined $("#ProjectCombo").data("kendoComboBox").value(projectId);` – R15 Dec 27 '22 at 13:34
  • you can defined function on the main view & bind your event to dom. so runtime when you append dynamic content to your page using partial view it will fire event. another option is that you can define your function where you want but inside that where you logic call it condition according to URL (logni) or you can set Page global variable to identify request came from login page or not. – Karan Ekkawala Dec 28 '22 at 08:20