2013-05-08 7 views
0

У меня есть кнопка asp: внутри диалогового окна jQuery, для которого событие OnClick не запускается. Я использую свойство PostBackUrl, чтобы перейти на другую страницу, но я хочу, чтобы установил это свойство в событии OnClick, чтобы я мог добавить переменную строки запроса в соответствии с именем файла, который они загружают в диалоговом окне. Ранее я задавал вопрос об этом диалоге, потому что я не мог заставить его полностью отправить сообщение, но это исправлено. Нажатие на кнопку возвращает сообщение в порядке, и я могу установить свойство PostBackUrl в asp-разметке или в Page_Load() кода позади. Но I не может получить функцию OnClick по какой-либо причине, и вот где я хочу установитьPostBackUrl. Вот .aspx ...asp: кнопка в диалоговом окне jQuery не запускается событие OnClick

<form id="frmDialog" runat="server"> 
     <asp:Button ID="btnDisplayDialog" runat="server" Text="Click to Display Login Dialog" OnClientClick="showDialog(); return false;" /> 
     <div class="divInnerForm"></div> 
     <div class="divDialog" style="display: none"> 
      <table style="width: 100%;"> 
       <tr> 
        <td>First Name: <asp:TextBox ID="txtFirstName" runat="server" Text=""></asp:TextBox></td> 
        <td>Last Name: <asp:TextBox ID="txtLastName" runat="server" Text=""></asp:TextBox></td> 
       </tr> 
       <tr> 
        <td> 
         How Old are You? 
         <asp:DropDownList ID="ddlAge" runat="server"> 
          <asp:ListItem Value="1">1</asp:ListItem> 
          <asp:ListItem Value="2">2</asp:ListItem> 
          <asp:ListItem Value="3">3</asp:ListItem> 
         </asp:DropDownList> 
        </td> 
        <td> 
         How Many Siblings do You Have? 
         <asp:DropDownList ID="ddlNumberSiblings" runat="server"> 
          <asp:ListItem Value="1">1</asp:ListItem> 
          <asp:ListItem Value="2">2</asp:ListItem> 
          <asp:ListItem Value="3">3</asp:ListItem> 
          <asp:ListItem Value="4">4</asp:ListItem> 
         </asp:DropDownList> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         What is your birthday? 
         <input type="text" id="datepicker" name="datepicker" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         Please Choose a Picture to Upload: 
         <asp:FileUpload ID="fupUserPicture" runat="server" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnUserPicture_Click" /> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </form> 

... скрипт JQuery, который отображает диалоговое окно и помещает его в виде ...

function showDialog() { 
     $('.divDialog').dialog({ 
      modal: true, show: 'slide', width: 500, 
      open: function (event, ui) { 
       $('.divInnerForm').append($(this).parent()); 
      } 
     }); 
    } 

... и код позади с моей OnClick функция ....

protected void btnUserPicture_Click(object sender, EventArgs e) 
     { 
      string fileName = ""; 
      if (fupUserPicture.HasFile) 
      { 
       try 
       { 
        fileName = Path.GetFileName(fupUserPicture.FileName); 
        fupUserPicture.SaveAs(Server.MapPath("~/Images/" + fileName)); 
       } 
       catch (Exception ex) 
       { 
       } 
       btnSubmit.PostBackUrl = "~/Profile.aspx?pic=" + fileName; 
      } 
     } 

EDIT: Хорошо, вот как кнопка отправки в диалоговом окне фактически отображается как HTML. Я думаю, что это может быть проблемой. Как вы можете видеть, javascript onclick просто предоставляет «Profile.aspx» в качестве обратного URL-адреса, хотя мне кажется, что любой код на стороне сервера должен выполняться в первую очередь. Это в форме ...

<input id="btnSubmit" type="submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubmit", "", false, "", "Profile.aspx", false, false))" value="Submit" name="btnSubmit"> 

..И вот как это renderes, если удалить btnSubmit.PostBackUrl = "~/Profile.aspx" из функции Page_Load() ....

<input id="btnSubmit" type="submit" value="Submit" name="btnSubmit"> 

EDIT 2: ОК, так что я добавил еще одна скрытая кнопка asp вне диалога, а кнопка внутри диалогового окна теперь вызывает функцию javascript, которая вызывает событие скрытой кнопки OnClick. То же самое, функция javascript работает нормально, но btnHidden_Click() function does not run! Я нахожусь в полной потере, на данный момент я буквально понятия не имею, почему это не работает. Вот новая скрытая кнопка, вне диалога DIV, но внутри формы, как вы можете увидеть ....

</div> 
     <asp:Button ID="btnHidden" runat="server" Text="" Visible="false" ClientIDMode="Predictable" OnClick="btnHidden_Click"/> 
    </form> 

... вот кнопка в диалоге с событием OnClientClick, который, как я Said работает отлично ...

   <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="forcebtnHiddenClick(); return false;" /> 

а вот функция OnClick в коде для btnHidden, хотя это точно так же, как и раньше ...

protected void btnHidden_Click(object sender, EventArgs e) 
     { 
      string fileName = ""; 
      if (fupUserPicture.HasFile) 
      { 
       try 
       { 
        fileName = Path.GetFileName(fupUserPicture.FileName); 
        fupUserPicture.SaveAs(Server.MapPath("~/Images/" + fileName)); 
       } 
       catch (Exception ex) 
       { 
       } 
       Response.Redirect("~/Profile.aspx?pic=" + fileName); 
      } 
     } 

... и яваскрипт функции, работает, но по какой-то причине не приводит к btnHidden_Click работает ...

function forcebtnHiddenClick(e) { 
    //__doPostBack('btnHidden', 'OnClick'); 
    $('#btnHidden').trigger('click'); 
} 

..as вы можете увидеть, я попытался как .trigger («щелчок») и __doPostBack(), как в нет.

EDIT: Хорошо, так что проблема, безусловно, функция

function forcebtnHiddenClick() { 
      __doPostBack('btnHidden', ''); 
} 

, который на самом деле не вызывая btnHidden_Click событие. Когда я делаю btnHidden видимым и нажимаю его непосредственно, функция btnHidden_Click работает нормально.

EDIT: После ТОНН поисков, нашел это и получил его на работу ...

function forcebtnHiddenClick() { 
      <%= ClientScript.GetPostBackEventReference(btnHidden, string.Empty) %>; 
     } 

Я не знаю, почему

__doPostBack(<%= btnHidden.ClientID %>, '') 

не работает.

+0

Что такое инструкция $ ('. DivInnerForm'). Append ($ (this) .parent()); пытается chaeiev? попробуйте прокомментировать это. – pranag

+0

Я не понимаю, когда вы говорите, что сообщение на кнопке отлично подходит, но onclick не срабатывает. В событии click будет генерироваться postback. Вы говорите, когда страница проходит через обратную передачу, обработчик события кнопки не когда вы наложили на него точку останова? –

+0

@pranag без этого скрипта jQuery перемещает диалоговое окно вне формы, когда страница отображает – MassStrike

ответ

6

Попробуйте

function showDialog() { 
    $('.divDialog').dialog({ 
     modal: true, show: 'slide', width: 500 
    }); 
    $(".divDialog").parent().appendTo($("form:first")); 
} 

Вы должны быть добавление divDialog в виде не то пустое divInnerForm .Затем ваша кнопка будет в форме и его по щелчку событие будет срабатывать счастливо.

Update

Попробуйте также с помощью onclient click.Then проволоки этого атрибута в функцию, которая заставит пост обратно на скрытой кнопке.

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="forceClick();" /> 
<asp Button id="hidButton" runat="server" onclick="hidButton_Click" /> 

function forceClick(){ 

__doPostBack('<%#hidButton.UniqueId %>'); 
} 

Затем с помощью обработчика событий hidButton_Click введите код.

+0

Это поместит диалог в форму, но это не проблема. Проверьте комментарий, который я сделал в первом ответе. – MassStrike

+1

Это поместит диалог и его содержимое в форму. Затем, когда мы уверены, что кнопка находится в форме, мы можем попытаться решить проблему, почему она не срабатывает. Если вы установите на клик, нажмите на кнопку, она загорится. Затем мы можем использовать этот атрибут с другой скрытой кнопкой, чтобы заставить пост вернуться. –

+0

Да, я думаю, это то, что я в конечном итоге попытаюсь. – MassStrike

3
$(this).parent().appendTo('form') 

должен работать нормально .. Добавьте его в виде огня на стороне сервера события

+0

Это, конечно, диалоговое окно в форме, но это не проблема, диалог определенно уже находится в форме. Я * думаю * проблема заключается в том, как кнопка на самом деле отображается в html, я отправляю источник сейчас ... – MassStrike

+0

Вы объявили DOCTYPE своей страницы ..? У меня была эта проблема один раз .. – writeToBhuwan

+0

Только стандартный , который генерируется при создании страницы веб-формы. – MassStrike

1

Когда я использую JQuery диалоговое окно, я всегда использую кнопки, которые приходят как часть диалога. Затем, когда их щелкают, я вызываю функцию javascript для выполнения своих действий.

Если мне нужно обработать PostBack с этих кнопок, я создаю отдельную кнопку ASP.Net на странице - это кнопка, которую я использую для обработки моего события OnClick. Пользователь не будет нажимать кнопку ASP.Net, хотя (я скрываю его с помощью css, чтобы он не был виден на странице). Вместо этого функция javascript, которую я вызываю при нажатии кнопки диалога, вызывает код, который будет имитировать щелчок моей кнопки ASP.Net.

В результате нажатие кнопки диалога на странице будет отправляться, как если бы была нажата кнопка ASP.Net, и я могу обработать ее через мое событие OnClick.

Вот некоторые примеры кода (в VB.Net) ...

Dim csm As ClientScriptManager = Page.ClientScript 
    Dim js As New StringBuilder 
    js.AppendLine("function handleSubmitMyButton() {") 
    js.AppendLine(csm.GetPostBackEventReference(MyButton, "")) 
    js.AppendLine("}") 
    csm.RegisterClientScriptBlock(Me.Page.GetType, "create_call_to_MyButton", js.ToString, True) 

Когда страница будет построен, он будет включать в себя handleSubmitMyButton() Javascript функции. Щелчок на кнопке диалога вызовет эту функцию, которая вызовет функцию PostBack, как если бы была нажата кнопка «MyButton».

Обычно мне не нужно скрывать кнопку ASP.Net с помощью css. Часто кнопка запускается, чтобы открыть диалог. Я предотвращаю PostBack, когда он открывает диалог; затем, когда нажата кнопка диалога, я имитирую щелчок этой кнопки.

UPDATE: Я видел несколько человек упоминают следующую строку кода

$(this).parent().appendTo(jQuery("form:first")); 

Я думал, что это то, что вы пытаетесь сделать с вашей строки кода:

$('.divInnerForm').append($(this).parent()); 

Если Безразлично» t сделать то же самое, однако, вам нужно, чтобы код добавлял ваши поля в форму.

+0

Это круто, на самом деле, я могу попробовать. – MassStrike

0

Я использую модальный диалог, и мне нужно добавить строку, иначе я получу модальную прозрачность над кнопкой закрытия!

var $ObjDialog = $("div[id*='div_MyPopup']"); 
$ObjDialog.dialog({ 
    modal: true 
}); 
$ObjDialog.parent().prev().appendTo($("form:first")); 
$ObjDialog.parent().appendTo($("form:first")); 
0

Вы также можете использовать в LinkButton вместо этого, OnClick вызывает постбэк с этим, нет необходимости корректировать любые JQuery тогда.

Смежные вопросы