CODEWITHSUNDEEP
jqueryasp.netajaxasp.net-mvc-3
Conceptual
Conceptual

Reputation: 57

ASP.NET MVC 3 message while file is uploading with jQuery, jQueryUI or Ajax

When I click on the submit button "input type="submit" id="submit" value="Save"". it starts uploading a file that I selected from my hard disk. this all doesnt matter though, because I made a div with the text "uploading" and the style of that div is visibility:hidden; now what I want is that when I click on the submit button (the time when the file starts uploading) that the div becomes visible, I've tried several things including " How can I display a status message while a file is uploading? " but no luck, could be just me but I am fairly new to jQuery so I would appreciate some help.

Thanks

EDIT: I tried the all the codes below, but nothing worked, I also tried

$('#editform').submit(function() {
        $('#loadingdiv').show();
        return true;
    });

(editform being the form ID that I'm working in) but no luck, does anyone know why this is happening?

My whole edit page below

@using (Html.BeginForm("Edit", "Admin",FormMethod.Post, new { enctype = multipart/form-data", id = "editform" })){
@Html.EditorForModel()
<div class="editor-field">
    @if (Model.ImageData == null)
    {
        @:None
    }
    else
    {
        <img width="150" height="150"
             src="@Url.Action("GetImage", "Product", new { Model.ProductID })" alt="bic boii" />
    }
    <div>
        Upload nieuw image: &nbsp; &nbsp; &nbsp;
        <input type="file" name="Image" />
    </div>
</div>

<div>
    Upload nieuw document:
    <input type="file" name="Pdf" />
</div>

<script type="text/javascript">
    $('#editform').submit(function() {
        $('#loadingdiv').show();
        return true;
    });

</script>
<input type="submit" id="submit" value="Opslaan" />
@Html.ActionLink("Ga terug", "Index")
<div id="loadingdiv">
    Bezig met uploaden.
</div>}

hmm, after putting a breakpoint on my form, it just skips my script completely, I'm not sure what that is about

Upvotes: 1

Views: 1290

Answers (2)

Bardo
Bardo

Reputation: 2523

$("#submit").click(function () { $("#yourContainerId").show(); });

This says: When submit button is clicked launch a function where you select the div where the message is contained (whose id I've called here yourContainerId) and show it.

If it doesn't work it should return an error that might help us to know what is happening. Also it could be easier if you post your client code on the question. Maybe there's some error on your code that's stopping the execution from reaching the code where you try to show your message.

Upvotes: 1

CR41G14
CR41G14

Reputation: 5594

You could use Ajax to upload the File? Then you can call the showing of the Div before the ajax call and when it has completed then hide the div.

$.ajax({

    type: "POST",
    url: "/SomeController/SomeAction",
    data: $('form').serialize(),
    timeout: 3000,
    async: false,
    beforeSend: function() {
        $("loading").show();

    },

    complete: function() {
        $("loading").hide();

    },        
    cache: false,
    success: function(result) {

         return result;

    },
    error: function(error) {
        $("laoding").hide();
        alert("Some problems have occured. Please try again later: " + error);

    }

});

Upvotes: 0

Related Questions