JavaScript Failing in Partial View MVC

Question

I had a MVC 5 view which has a tab control. I have the following view

@using System.Collections
@using MyComp.Content.Text;
@using MyComp.Utilities;
@using System.Linq;
@model MyComp.Models.ViewModels.AdministratorViewModel

<style type="text/css">
    ...
</style>

<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery-2.0.0.js"></script>

<div class="manage">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active">
            <a data-toggle="tab" href="#invite">
                <span class="glyphicon glyphicon-inbox"></span>Invite
            </a>
        </li>
        <li>
            <a data-toggle="tab" href="#custom_invite">
                <span class="glyphicon glyphicon-pencil"></span>Custom Invite
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="invite" class="tab-pane active fade in">
            @Html.Partial("_InvitePartial", Model)
        </div>
        <div id="custom_invite" class="htmlCode tab-pane fade">
            @Html.Partial("_CustomInvitePartial", Model)
        </div>
    </div>
</div>
@section scripts {
    <script>
        function onSuccess(result) {
            $('#notify_failure_message').html(result.notify_failure);
            $('#notify_success_message').html(result.notify_success);
        }
    </script>
    <script>
        $(function () {
            $("input[type=button]").click(function () {
                var data_email = $('#email').val();
                var data_product = $('#product option:selected').text();
                $.ajax({
                    url: 'Tools/SendInvite',
                    type: 'POST',
                    data: { email: data_email, product: data_product },
                    success: function (result) {
                        $('#fail_message').html(result.result_failure);
                        $('#success_message').html(result.result_success);
                    }
                });
            });
        });
    </script>
}

and my partial view as

@using System.Collections
@using MyComp.Content.Text;
@using MyComp.Utilities;
@using System.Linq;
@model MyComp.Models.ViewModels.AdministratorViewModel

@using (Html.BeginForm("SendInvite", "Tools", FormMethod.Post,
    new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h2>Invite Users</h2>
    <div class="form-group">
        @Html.LabelFor(m => m.EmailAddress, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.EmailAddress,
                new { @class = "form-control", id = "email" })
            @Html.ValidationMessageFor(m => m.EmailAddress)
        </div>
    </div>
    <div class="form-group">
        @Html.Label("Access To", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.DropDownList("Product", new SelectList(
                new List<Object> {
                    new { Text = "ProcuctA", Value = "ProcuctA" },
                    new { Text = "ProcuctB", Value = "ProcuctB" },
                    new { Text = "All", Value = "All" }},
                    "Value",
                    "Text"),
                    new { @class = "form-control", id = "product" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <span id="fail_message" class="label label-danger"></span>
            <span id="success_message" class="label label-success"></span>
            @*<p class="text-info">Test Message</p>*@
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="button" id="invite_button" value="Invite User" class="btn btn-primary" />
        </div>
    </div>
}

Bu my button id="invite_button" won't fire the controller method. When I had everything in a single view it did fire and all was fine, this was using the same java script, why has this stopped working when I have moved to a partial view?

Thanks for your time.

Edit. my main view that hosts the partial views is

@using System.Collections
@using VisasysNET.Content.Text;
@using VisasysNET.Utilities;
@using System.Linq;
@model VisasysNET.Models.ViewModels.AdministratorViewModel

<style type="text/css">
    span {
        padding-right: 10px;
    }
    ...
</style>

<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery-2.0.0.js"></script>

<div class="manage">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active">
            <a data-toggle="tab" href="#invite">
                <span class="glyphicon glyphicon-inbox"></span>Invite
            </a>
        </li>
        <li>
            <a data-toggle="tab" href="#custom_invite">
                <span class="glyphicon glyphicon-pencil"></span>Custom Invite
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="invite" class="tab-pane active fade in">
            @Html.Partial("_InvitePartial", Model)
        </div>
        <div id="custom_invite" class="htmlCode tab-pane fade">
            @Html.Partial("_CustomInvitePartial", Model)
        </div>
    </div>
</div>
@section scripts {
    <script>
        function onSuccess(result) {
            $('#notify_failure_message').html(result.notify_failure);
            $('#notify_success_message').html(result.notify_success);
        }
    </script>
    <script>
        $(function () {
            $("input[type=button]").click(function () {
                var data_email = $('#email').val();
                var data_product = $('#product option:selected').text();
                $.ajax({
                    url: 'Tools/SendInvite',
                    type: 'POST',
                    data: { email: data_email, product: data_product },
                    success: function (result) {
                        $('#fail_message').html(result.result_failure);
                        $('#success_message').html(result.result_success);
                    }
                });
            });
        });
    </script>
}

Can you add your layout page. It'd be nice to see where your scripts section appears in the page. Thanks! — N-ate, Aug 26 '15 at 15:31
@Igor sorry that was a typo, I am not including the js files multiple times. I have ammended the code in the question. — MoonKnight, Aug 26 '15 at 15:43
Have you looked at the rendered page source to verify the javascript is inserted in the page? — N-ate, Aug 26 '15 at 15:55

score 3 · Answer 1 · edited May 23 '17 at 10:26

3

section's do not work within partial views,

see here:

Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine

edited May 23 '17 at 10:26

Community

1
1

answered Aug 26 '15 at 15:33

Ric

12,855
3
30
36

I did not know that, thanks! I will check this solution right away and feed back... – MoonKnight Aug 26 '15 at 15:35
This did not solve the problem, the javascript still does not fire and subsequently my controller method is not called... I will edit the question with my main view razor view now... – MoonKnight Aug 26 '15 at 15:38
did you move the `@section` into the main view? are there any errors on the console? (`f12` to see console) – Ric Aug 26 '15 at 15:40
Yeah, there are two, seemingly unrelated errors `Failed to load resource: the server responded with a status of 404 (Not Found)`. It seems I cannot be using these js files otherwise nothing would work. Thanks again... – MoonKnight Aug 26 '15 at 15:52
the 404, is it related to the controller/action or something else? – Ric Aug 26 '15 at 15:53
Something else. If i take these .js references out, it works just fine. – MoonKnight Aug 26 '15 at 16:05

score 2 · Accepted Answer · answered Aug 26 '15 at 15:43

2

invite_button does not have any javascript referencing it. Neither is it of type submit. This button will always do nothing.

It looks like you expect it to be of type submit.

<input type="submit" id="invite_button" value="Invite User" class="btn btn-primary" />

answered Aug 26 '15 at 15:43

N-ate

6,051
2
40
48

2

The javascript is looking at any input types that are buttons and attaching the click handler, i dont think the intention is to perform a submit - could be wrong though? – Ric Aug 26 '15 at 15:46
That is getting the method to fire. However, this is passing in the correct "product" to my method, but "email" is being set to null. Any further ideas? – MoonKnight Aug 26 '15 at 15:48
your email input has `name="EmailAddress"` and `id="email"` - correct that. You realize the difference between ajax POST request and html form submission, right? – Igor Aug 26 '15 at 15:51
Thanks very much for your time here. I have to apologise, I am a noob. I assume that the java script is looking for the id field which is set to "email". The `EmailAddress` is just being pulled from the model right? – MoonKnight Aug 26 '15 at 15:55
@Killercam - yes: `@Html.TextBoxFor(m => m.EmailAddress, new { ... id = "email" })` – Igor Aug 26 '15 at 16:16
@Igor I don't see your point. That is the code I have and the email string is not being pushed through to the view. But it is not because of my reference to EmailAddress above... – MoonKnight Aug 26 '15 at 19:44
1

@Killercam - `m => m.EmailAddress` is responsible for `name="EmailAddress"`, while `id = "email"` defines `id` attribute of the resulting `input` element. When you use ajax POST, you obtain the value by id and send it to server as Request.Form["email"]. When you submit the form using `type="submit"` button, the e-mail value is passed to the server-side code as Request.Form["EmailAddress"]. – Igor Aug 26 '15 at 21:03

score 1 · Answer 3 · answered Aug 26 '15 at 16:22

Try modifying the input button type from submit to button - it will work.. I tried with alert in a sample application and it worked.. for me. Below is the code. Here's the MVC index view

<script type="text/javascript">   

    $(document).ready(function () {
        $("input[type=button]").click(function () {
            alert("hello from partial class");
        });
    });

</script>

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
        http://asp.net/mvc</a>.
</p>
<div>
    @Html.Partial("~/Views/Home/_MyTest.cshtml")

and here the partial view

@{
    ViewBag.Title = "_MyTest";
}

<div>
    <input type="button" id="invite_button" value="Invite User"/>
</div>

So on click on the button I am able to the jquery and alert popup's up

hope this helps..

score 0 · Answer 4 · answered Aug 26 '15 at 15:36

0

you need to render scripts in your layout view.

<body>
   <!-- Other Code -->
   @RenderSection("scripts", required: false)
</body>

answered Aug 26 '15 at 15:36

Matthew Thurston

720
5
22

Where do I put this? Sorry I am total web novice. – MoonKnight Aug 26 '15 at 15:38
this would already appear by default in your `views\shared\_layout.cshtml` – Ric Aug 26 '15 at 15:39
by default I believe they are in $/Views/Shared/ _layout.cshtml, edit: what Ric said :) – Matthew Thurston Aug 26 '15 at 15:40
Ofcourse, yeah I already have this code active. Thanks for your help, it is most appreciated... – MoonKnight Aug 26 '15 at 15:49

JavaScript Failing in Partial View MVC

4 Answers4