Question

我在我的aspx页面中使用了一个脚本链接，但它不起作用，但是当我将相同的脚本复制到我的aspx页面里面的标签时，它可以工作，但不能保存在一个单独的文件中并链接。

错误：

未捕获的TypeError：无法读取null的属性“value” 在保存（custom.js：9）在HTMLInputElement.onclick（frmPicStories.aspx：91）

.aspx页面：

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="frmPicStories.aspx.cs" Inherits="HimHer.Pages.frmPicStories" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style>
        .container-fluid-ex {
            width: 40%;
            margin-left: 35% !important;
            margin-top: 10% !important;
            border-style: ridge;
            padding-bottom: 10px;
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 18px;
            border-width: 1px;
        }
    </style>


    <script src="../assets/Js/custom.js" type="text/javascript"></script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderPageContents" runat="server">
    <div class="container-fluid-ex">
            <div class="row">
                <div class="col-md-12">
                    <label>Story</label>
                    <textarea id="txtStory" type="text" class="form-control"></textarea>
                    <br />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Image</label>
                    <%--<input runat="server" type="file" id="imgUploader" />--%>
                   <asp:FileUpload ID="imgUploader" runat="server" />
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-md-06">
                    <%--<button type="submit" onclick='save()' class="btn btn-primary pull-right">Save</button>--%>
                     <asp:Button ID="btnSave" class="btn btn-primary pull-right" Text="Save" runat="server" OnClientClick='save(); return false;' />
                </div>

                <div class="col-md-06">
                    <button type="submit" onclick='show()' class="btn btn-warning pull-right">Show</button>
                </div>
            </div>
        </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolderScripts" runat="server">
</asp:Content>

custom.js文件中的JS代码

function save() {
    var uploadedImageValue = document.getElementById("<%= imgUploader.ClientID %>");

    var images = {
        Image: uploadedImageValue.value,
        Story: txtStory.value
    };

    var JsonImages = JSON.stringify(images);

    $.ajax
    ({
        url: '/Images/post',
        type: 'POST',
        contentType: "application/json; charset= utf-8",
        data: JsonImages,
        dataType: 'json',
        success: function (results) {
            alert(results);
            $('#myModal').modal('hide');
        }
    });
}
function show() {
    var table = $('#example').DataTable({
        "serverSide": true,
        "retrieve": true,
        "destroy": true,
        "contentType": 'application/json; charset=utf-8',
        "pagingType": "full_numbers",
        "paging": true,
        "ajax": "http://localhost:28071/Users",
        "columnDefs": [{
            "targets": -1,
            "data": null,
            "defaultContent": "<button>Click!</button>"
        }]
    });
    $('#example tbody').on
    (
        'click',
        'button',
        function () {
            var $row = $(this).closest('tr');
            var $cellUserName = $row.find('td:nth-child(1)');
            var $cellUserPwd = $row.find('td:nth-child(2)');

            txtStoryEdit.value = $cellUserName.text();
            txtPassword.value = $cellUserPwd.text();

            $('#myModal').modal('show');
        }
    )
}

function update() {
    var users = {

        UserName: txtStoryEdit.value,
        Password: txtPassword.value
    };

    var JsonUsers = JSON.stringify(users);

    $.ajax
    ({
        url: 'http://localhost:28071/Users/' + 1,
        type: 'PUT',
        contentType: "application/json; charset= utf-8",
        data: JsonUsers,
        success: function (results) {
            alert(results);
            $('#myModal').modal('hide');
        }
    });
}

文件夹的层次结构：

C＃代码：

protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                this.btnSave.Attributes.Add("onClick", "save()");

                if (!IsPostBack)
                {

                }

            }
            catch (Exception)
            {
                throw;
            }
        }

Answer 1

该行

var uploadedImageValue = document.getElementById("<%= imgUploader.ClientID %>");

没有imgUploader的值，因此该行失败

uploadedImageValue.value

Answer 2

JS中的第一行是问题：

var uploadedImageValue = document.getElementById("<%= imgUploader.ClientID %>");

您期望它在JS文件中运行ASPX代码，但这不会发生。相反，传递对象。

function save(uploadedImageValue) {
...
}

在你的ASPX中：

<asp:Button ID="btnSave" class="btn btn-primary pull-right" Text="Save" runat="server" OnClientClick='save("<%= imgUploader.ClientID %>"); return false;' />

为什么我的js脚本在从文件引用时不会加载，但在本地使用时会起作用？

2 个答案: